<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Values and Units Module Level 4</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This CSS module describes the common values and units that CSS properties accept and the syntax used for describing them in CSS property definitions." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-values-4/" rel="canonical">
<style>
code, small { white-space: nowrap }
pre.value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; }
#propvalues td { text-align: right; }
#propvalues td + td { text-align: left; }
dt + dt::before { content: ", "; }
dl:not(.switch) dt { display: inline; }
td > small { display: block; }
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
<style>/* style-wpt */

.wpt-tests-block {
	list-style: none;
	border-left: .5em solid hsl(290, 70%, 60%);
	background: hsl(290, 70%, 95%);
	margin: 1em auto;
	padding: .5em;
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-column-gap: .5em;
}
.wpt-tests-block::before {
	content: "Tests";
	grid-column: 1/-1;
	color: hsl(290, 70%, 30%);
	text-transform: uppercase;
}
.wpt-test {
	display: contents;
}
.wpt-test > a {
	text-decoration: underline;
	border: none;
}
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Values and Units Module Level 4</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2018/WD-css-values-4-20181010/" rel="prev">https://www.w3.org/TR/2018/WD-css-values-4-20181010/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins</a> (<span class="p-org org">Google</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">fantasai</a>
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-values-4/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-values-4">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This CSS module describes the common values and units that CSS properties accept and the syntax used for describing them in CSS property definitions.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-values” in the title,
	preferably like this:
	“[css-values] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk">
   <p>The following features are at-risk, and may be dropped during the CR period: </p>
   <ul>
    <li><a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle">toggle()</a>, <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr">attr()</a>
   </ul>
   <p>“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.</p>
  </div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
     <ol class="toc">
      <li><a href="#placement"><span class="secno">1.1</span> <span class="content"> Module Interactions</span></a>
     </ol>
    <li>
     <a href="#value-defs"><span class="secno">2</span> <span class="content"> Value Definition Syntax</span></a>
     <ol class="toc">
      <li><a href="#component-types"><span class="secno">2.1</span> <span class="content"> Component Value Types</span></a>
      <li><a href="#component-combinators"><span class="secno">2.2</span> <span class="content"> Component Value Combinators</span></a>
      <li><a href="#component-multipliers"><span class="secno">2.3</span> <span class="content"> Component Value Multipliers</span></a>
      <li><a href="#combinator-multiplier-patterns"><span class="secno">2.4</span> <span class="content"> Combinator and Multiplier Patterns</span></a>
      <li><a href="#component-whitespace"><span class="secno">2.5</span> <span class="content"> Component Values and White Space</span></a>
      <li><a href="#value-examples"><span class="secno">2.6</span> <span class="content"> Property Value Examples</span></a>
     </ol>
    <li><a href="#combining-values"><span class="secno">3</span> <span class="content"> Combining Values: Interpolation, Addition, and Accumulation</span></a>
    <li>
     <a href="#textual-values"><span class="secno">4</span> <span class="content"> Textual Data Types</span></a>
     <ol class="toc">
      <li>
       <a href="#keywords"><span class="secno">4.1</span> <span class="content"> Pre-defined Keywords</span></a>
       <ol class="toc">
        <li><a href="#common-keywords"><span class="secno">4.1.1</span> <span class="content"> CSS-wide keywords: <span class="css">initial</span>, <span class="css">inherit</span> and <span class="css">unset</span></span></a>
       </ol>
      <li><a href="#custom-idents"><span class="secno">4.2</span> <span class="content"> Author-defined Identifiers: the <span class="production">&lt;custom-ident></span> type</span></a>
      <li><a href="#strings"><span class="secno">4.3</span> <span class="content"> Quoted Strings: the <span class="production">&lt;string></span> type</span></a>
      <li>
       <a href="#urls"><span class="secno">4.4</span> <span class="content"> Resource Locators: the <span class="production">&lt;url></span> type</span></a>
       <ol class="toc">
        <li>
         <a href="#relative-urls"><span class="secno">4.4.1</span> <span class="content"> Relative URLs</span></a>
         <ol class="toc">
          <li><a href="#local-urls"><span class="secno">4.4.1.1</span> <span class="content"> Fragment URLs</span></a>
         </ol>
        <li><a href="#url-empty"><span class="secno">4.4.2</span> <span class="content"> Empty URLs</span></a>
        <li><a href="#url-modifiers"><span class="secno">4.4.3</span> <span class="content"> URL Modifiers</span></a>
       </ol>
     </ol>
    <li>
     <a href="#numeric-types"><span class="secno">5</span> <span class="content"> Numeric Data Types</span></a>
     <ol class="toc">
      <li><a href="#numeric-ranges"><span class="secno">5.1</span> <span class="content"> Range Restrictions and Range Definition Notation</span></a>
      <li>
       <a href="#integers"><span class="secno">5.2</span> <span class="content"> Integers: the <span class="production">&lt;integer></span> type</span></a>
       <ol class="toc">
        <li><a href="#combine-integers"><span class="secno">5.2.1</span> <span class="content"> Combination of <span class="production">&lt;integer></span></span></a>
       </ol>
      <li>
       <a href="#numbers"><span class="secno">5.3</span> <span class="content"> Real Numbers: the <span class="production">&lt;number></span> type</span></a>
       <ol class="toc">
        <li><a href="#combine-numbers"><span class="secno">5.3.1</span> <span class="content"> Combination of <span class="production">&lt;number></span></span></a>
       </ol>
      <li>
       <a href="#dimensions"><span class="secno">5.4</span> <span class="content"> Numbers with Units: <span>dimension</span> values</span></a>
       <ol class="toc">
        <li><a href="#compat"><span class="secno">5.4.1</span> <span class="content"> Compatible Units</span></a>
        <li><a href="#combine-dimensions"><span class="secno">5.4.2</span> <span class="content"> Combination of Dimensions</span></a>
       </ol>
      <li>
       <a href="#percentages"><span class="secno">5.5</span> <span class="content"> Percentages: the <span class="production">&lt;percentage></span> type</span></a>
       <ol class="toc">
        <li><a href="#combine-percentages"><span class="secno">5.5.1</span> <span class="content"> Combination of <span class="production">&lt;percentage></span></span></a>
       </ol>
      <li>
       <a href="#mixed-percentages"><span class="secno">5.6</span> <span class="content"> Mixing Percentages and Dimensions</span></a>
       <ol class="toc">
        <li><a href="#combine-mixed"><span class="secno">5.6.1</span> <span class="content"> Combination of Percentage and Dimension Mixes</span></a>
       </ol>
     </ol>
    <li>
     <a href="#lengths"><span class="secno">6</span> <span class="content"> Distance Units: the <span class="production" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></span> type</span></a>
     <ol class="toc">
      <li>
       <a href="#relative-lengths"><span class="secno">6.1</span> <span class="content"> Relative Lengths</span></a>
       <ol class="toc">
        <li><a href="#font-relative-lengths"><span class="secno">6.1.1</span> <span class="content"> Font-relative Lengths: the <span class="css">em</span>, <span class="css">ex</span>, <span class="css">cap</span>, <span class="css">ch</span>, <span class="css">ic</span>, <span class="css">rem</span>, <span class="css">lh</span>, <span class="css">rlh</span> units</span></a>
        <li><a href="#viewport-relative-lengths"><span class="secno">6.1.2</span> <span class="content"> Viewport-percentage Lengths: the <span class="css">vw</span>, <span class="css">vh</span>, <span class="css">vi</span>, <span class="css">vb</span>, <span class="css">vmin</span>, <span class="css">vmax</span> units</span></a>
       </ol>
      <li><a href="#absolute-lengths"><span class="secno">6.2</span> <span class="content"> Absolute Lengths: the <span class="css">cm</span>, <span class="css">mm</span>, <span class="css">Q</span>, <span class="css">in</span>, <span class="css">pt</span>, <span class="css">pc</span>, <span class="css">px</span> units</span></a>
     </ol>
    <li>
     <a href="#other-units"><span class="secno">7</span> <span class="content"> Other Quantities</span></a>
     <ol class="toc">
      <li><a href="#angles"><span class="secno">7.1</span> <span class="content"> Angle Units: the <span class="production" title="Expands to: turn | rad | grad | deg">&lt;angle></span> type and <span class="css">deg</span>, <span class="css">grad</span>, <span class="css">rad</span>, <span class="css">turn</span> units</span></a>
      <li><a href="#time"><span class="secno">7.2</span> <span class="content"> Duration Units: the <span class="production" title="Expands to: s | ms">&lt;time></span> type and <span class="css">s</span>, <span class="css">ms</span> units</span></a>
      <li><a href="#frequency"><span class="secno">7.3</span> <span class="content"> Frequency Units: the <span class="production" title="Expands to: hz | khz">&lt;frequency></span> type and <span class="css">Hz</span>, <span class="css">kHz</span> units</span></a>
      <li><a href="#resolution"><span class="secno">7.4</span> <span class="content"> Resolution Units: the <span class="production" title="Expands to: dppx | x | dpcm | dpi">&lt;resolution></span> type and <span class="css">dpi</span>, <span class="css">dpcm</span>, <span class="css">dppx</span> units</span></a>
     </ol>
    <li>
     <a href="#defined-elsewhere"><span class="secno">8</span> <span class="content"> Data Types Defined Elsewhere</span></a>
     <ol class="toc">
      <li>
       <a href="#colors"><span class="secno">8.1</span> <span class="content"> Colors: the <span class="production" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></span> type</span></a>
       <ol class="toc">
        <li><a href="#combine-colors"><span class="secno">8.1.1</span> <span class="content"> Combination of <span class="production" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></span></span></a>
       </ol>
      <li>
       <a href="#images"><span class="secno">8.2</span> <span class="content"> Images: the <span class="production">&lt;image></span> type</span></a>
       <ol class="toc">
        <li><a href="#combine-images"><span class="secno">8.2.1</span> <span class="content"> Combination of <span class="production">&lt;image></span></span></a>
       </ol>
      <li>
       <a href="#position"><span class="secno">8.3</span> <span class="content"> 2D Positioning: the <span class="production">&lt;position></span> type</span></a>
       <ol class="toc">
        <li><a href="#combine-positions"><span class="secno">8.3.1</span> <span class="content"> Combination of <span class="production">&lt;position></span></span></a>
       </ol>
     </ol>
    <li>
     <a href="#functional-notations"><span class="secno">9</span> <span class="content"> Functional Notations</span></a>
     <ol class="toc">
      <li><a href="#toggle-notation"><span class="secno">9.1</span> <span class="content"> Toggling Between Values: <span class="css">toggle()</span></span></a>
     </ol>
    <li>
     <a href="#attr-notation"><span class="secno">10</span> <span class="content"> Attribute References: the <span class="css">attr()</span> function</span></a>
     <ol class="toc">
      <li><a href="#attr-types"><span class="secno">10.1</span> <span class="content"> <span class="css">attr()</span> Types</span></a>
      <li><a href="#attr-substitution"><span class="secno">10.2</span> <span class="content"> <span class="css">attr()</span> Substitution</span></a>
     </ol>
    <li>
     <a href="#math"><span class="secno">11</span> <span class="content"> Mathematical Expressions</span></a>
     <ol class="toc">
      <li><a href="#calc-func"><span class="secno">11.1</span> <span class="content"> Basic Arithmetic: <span class="css">calc()</span></span></a>
      <li><a href="#comp-func"><span class="secno">11.2</span> <span class="content"> Comparison Functions: <span class="css">min()</span>, <span class="css">max()</span>, and <span class="css">clamp()</span></span></a>
      <li>
       <a href="#trig-funcs"><span class="secno">11.3</span> <span class="content"> Trigonometric Functions: <span class="css">sin()</span>, <span class="css">cos()</span>, <span class="css">tan()</span>, <span class="css">asin()</span>, <span class="css">acos()</span>, <span class="css">atan()</span>, and <span class="css">atan2()</span></span></a>
       <ol class="toc">
        <li><a href="#trig-infinities"><span class="secno">11.3.1</span> <span class="content"> Argument Ranges</span></a>
       </ol>
      <li>
       <a href="#exponent-funcs"><span class="secno">11.4</span> <span class="content"> Exponential  Functions: <span class="css">pow()</span>, <span class="css">sqrt()</span>, <span class="css">hypot()</span></span></a>
       <ol class="toc">
        <li><a href="#exponent-infinities"><span class="secno">11.4.1</span> <span class="content"> Argument Ranges</span></a>
       </ol>
      <li><a href="#calc-syntax"><span class="secno">11.5</span> <span class="content"> Syntax</span></a>
      <li><a href="#calc-type-checking"><span class="secno">11.6</span> <span class="content"> Type Checking</span></a>
      <li>
       <a href="#calc-internal"><span class="secno">11.7</span> <span class="content"> Internal Representation</span></a>
       <ol class="toc">
        <li><a href="#calc-simplification"><span class="secno">11.7.1</span> <span class="content"> Simplification</span></a>
       </ol>
      <li><a href="#calc-computed-value"><span class="secno">11.8</span> <span class="content"> Computed Value</span></a>
      <li><a href="#calc-range"><span class="secno">11.9</span> <span class="content"> Range Checking</span></a>
      <li><a href="#calc-serialize"><span class="secno">11.10</span> <span class="content"> Serialization</span></a>
      <li><a href="#combine-math"><span class="secno">11.11</span> <span class="content"> Combination of Math Functions</span></a>
     </ol>
    <li>
     <a href="#iana"><span class="secno">12</span> <span class="content"> Appendix A: IANA Considerations</span></a>
     <ol class="toc">
      <li><a href="#about-invalid"><span class="secno">12.1</span> <span class="content"> Registration for the <code>about:invalid</code> URL scheme</span></a>
     </ol>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content"> Acknowledgments</span></a>
    <li><a href="#changes"><span class="secno"></span> <span class="content"> Changes</span></a>
    <li><a href="#sec-pri"><span class="secno"></span> <span class="content"> Security and Privacy Considerations</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>The value definition field of each CSS property can contain keywords,
	data types (which appear between <span class="css">&lt;</span> and <span class="css">></span>), and information on how
	they can be combined.
	Generic data types (<a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> being the most widely used)
	that can be used by many properties are described in this specification,
	while more specific data types (e.g., <a class="production css" data-link-type="type">&lt;spacing-limit></a>)
	are described in the corresponding modules.</p>
   <h3 class="heading settled" data-level="1.1" id="placement"><span class="secno">1.1. </span><span class="content"> Module Interactions</span><a class="self-link" href="#placement"></a></h3>
   <p>This module replaces and extends the data type definitions in <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> sections <a href="https://www.w3.org/TR/CSS21/about.html#value-defs">1.4.2.1</a>, <a href="https://www.w3.org/TR/CSS21/syndata.html#values">4.3</a>,
	and <a href="https://www.w3.org/TR/CSS21/aural.html#aural-intro">A.2</a>.</p>
   <h2 class="heading settled" data-level="2" id="value-defs"><span class="secno">2. </span><span class="content"> Value Definition Syntax</span><a class="self-link" href="#value-defs"></a></h2>
   <p>The <dfn data-dfn-for="CSS" data-dfn-type="dfn" data-export id="css-value-definition-syntax">value definition syntax<a class="self-link" href="#css-value-definition-syntax"></a></dfn> described here
	is used to define the set of valid values for CSS properties
	(and the valid syntax of many other parts of CSS).
	A value so described can have one or more components.</p>
   <h3 class="heading settled" data-level="2.1" id="component-types"><span class="secno">2.1. </span><span class="content"> Component Value Types</span><a class="self-link" href="#component-types"></a></h3>
   <p>Component value types are designated in several ways:</p>
   <ol>
    <li> <a href="#keywords">keyword</a> values (such as <span class="css">auto</span>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#disc" id="ref-for-disc">disc</a>, etc.),
			which appear literally, without quotes (e.g. <code>auto</code>) 
    <li> basic data types, which appear between <span class="css">&lt;</span> and <span class="css">></span> (e.g., <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>, <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value">&lt;percentage></a>, etc.).
			For <a data-link-type="dfn" href="#numeric-data-types" id="ref-for-numeric-data-types">numeric data types</a>,
			this type notation can annotate any range restrictions
			using the <a href="#numeric-ranges">bracketed range notation</a> described below. 
    <li> types that have the same range of values as a property bearing the same name
			(e.g., <a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width">&lt;'border-width'></a>, <a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-attachment" id="ref-for-propdef-background-attachment">&lt;'background-attachment'></a>, etc.).
			In this case, the type name is the property name (complete with quotes) between the brackets.
			Such a type does <em>not</em> include <a href="#common-keywords">CSS-wide keywords</a> such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit" id="ref-for-valdef-all-inherit">inherit</a>,
			and also does not include any top-level <a href="#mult-comma" id="ref-for-mult-comma">comma-separated-list multiplier</a> (i.e. if a property named <span class="css">pairing</span> is defined as <span class="css">[ <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value">&lt;custom-ident></a> <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value">&lt;integer></a>? ]#</span>,
			then <span class="css">&lt;'pairing'></span> is equivalent to <span class="css">[ <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value①">&lt;custom-ident></a> <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①">&lt;integer></a>? ]</span>,
			not <span class="css">[ <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value②">&lt;custom-ident></a> <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value②">&lt;integer></a>? ]#</span>). 
    <li> non-terminals that do not share the same name as a property.
			In this case, the non-terminal name appears between <span class="css">&lt;</span> and <span class="css">></span>,
			as in <a class="production css" data-link-type="type">&lt;spacing-limit></a>.
			Notice the distinction between <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css2/box.html#value-def-border-width" id="ref-for-value-def-border-width">&lt;border-width></a> and <a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width①">&lt;'border-width'></a>:
			the latter is defined as the value of the <span class="property" id="ref-for-propdef-border-width②">border-width</span> property,
			the former requires an explicit expansion elsewhere.
			The definition of a non-terminal is typically located near its first appearance in the specification. 
   </ol>
   <p>Some property value definitions also include the slash (/),
	the comma (,),
	and/or parentheses as literals.
	These represent their corresponding tokens.
	Other non-keyword literal characters that may appear in a component value,
	such as “+”,
	must be written enclosed in single quotes.</p>
   <p><strong><dfn class="dfn-paneled" data-dfn-type="grammar" data-export data-lt="," id="comb-comma">Commas</dfn> specified in the grammar are implicitly omissible</strong> in some circumstances,
	when used to separate optional terms in the grammar.
	Within a top-level list in a property or other CSS value,
	or a function’s argument list,
	a comma specified in the grammar must be omitted if:</p>
   <ul>
    <li> all items preceding the comma have been omitted 
    <li> all items following the comma have been omitted 
    <li> multiple commas would be adjacent (ignoring <a href="https://www.w3.org/TR/css-syntax/#whitespace">white space</a>/comments),
			due to the items between the commas being omitted. 
   </ul>
   <div class="example" id="example-c02dd41d">
    <a class="self-link" href="#example-c02dd41d"></a> For example, if a function can accept three arguments in order,
		but all of them are optional,
		the grammar can be written like: 
<pre class="prod">example( first<a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt">?</a> <a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma">,</a> second<a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt①">?</a> <a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma①">,</a> third<a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt②">?</a> )
</pre>
    <p>Given this grammar,
		writing <span class="css">example(first, second, third)</span> is valid,
		as is <span class="css">example(first, second)</span> or <span class="css">example(first, third)</span> or <span class="css">example(second)</span>.
		However, <span class="css">example(first, , third)</span> is invalid, as one of those commas are no longer separating two options;
		similarly, <span class="css">example(,second)</span> and <span class="css">example(first,)</span> are invalid. <span class="css">example(first second)</span> is also invalid,
		as commas are still required to actually separate the options.</p>
    <p>If commas were not implicitly omittable,
		the grammar would have to be much more complicated
		to properly express the ways that the arguments can be omitted,
		greatly obscuring the simplicity of the feature.</p>
   </div>
   <p>All CSS properties also accept the <a href="#common-keywords">CSS-wide keyword values</a> as the sole component of their property value.
	For readability these are not listed explicitly in the property value syntax definitions.
	For example, the full value definition of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color" id="ref-for-propdef-border-color">border-color</a> is <code>&lt;color>{1,4} | inherit | initial | unset</code> (even though it is listed as <code>&lt;color>{1,4}</code>).</p>
   <p class="note" role="note"><span>Note:</span> This implies that, in general,
	combining these keywords with other component values in the same declaration
	results in an invalid declaration.
	For example, <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background">background: url(corner.png) no-repeat, inherit;</a> is invalid.</p>
   <h3 class="heading settled" data-level="2.2" id="component-combinators"><span class="secno">2.2. </span><span class="content"> Component Value Combinators</span><a class="self-link" href="#component-combinators"></a></h3>
   <p>Component values can be arranged into property values as follows:</p>
   <ul>
    <li>Juxtaposing components means that
			all of them must occur, in the given order. 
    <li>A double ampersand (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="comb-all">&amp;&amp;</dfn>) separates two or more components,
			all of which must occur, in any order. 
    <li>A double bar (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="comb-any">||</dfn>) separates two or more options:
			one or more of them must occur, in any order. 
    <li>A bar (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="comb-one">|</dfn>) separates two or more alternatives:
			exactly one of them must occur. 
    <li>Brackets ([ ]) are for grouping. 
   </ul>
   <p>Juxtaposition is stronger than the double ampersand, the double
	ampersand is stronger than the double bar, and the double bar
	is stronger than the bar. Thus, the following lines are equivalent:</p>
<pre>  a b   |   c ||   d &amp;&amp;   e f
[ a b ] | [ c || [ d &amp;&amp; [ e f ]]]
</pre>
   <p>For reorderable combinators (||, &amp;&amp;),
	ordering of the grammar does not matter:
	components in the same grouping may be interleaved in any order.
	Thus, the following lines are equivalent:</p>
<pre>a || b || c
b || a || c
</pre>
   <h3 class="heading settled" data-level="2.3" id="component-multipliers"><span class="secno">2.3. </span><span class="content"> Component Value Multipliers</span><a class="self-link" href="#component-multipliers"></a></h3>
   <p>Every type, keyword, or bracketed group may be followed by one of
	the following modifiers:</p>
   <ul>
    <li>An asterisk (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="mult-zero-plus">*</dfn>) indicates that the preceding type, word, or
			group occurs zero or more times. 
    <li>A plus (<dfn data-dfn-type="grammar" data-export id="mult-one-plus">+<a class="self-link" href="#mult-one-plus"></a></dfn>) indicates that the preceding type, word, or group
			occurs one or more times. 
    <li>A question mark (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="mult-opt">?</dfn>) indicates that the preceding type, word, or
			group is optional (occurs zero or one times). 
    <li>A single number in curly braces (<dfn data-dfn-type="grammar" data-export id="mult-num">{<var>A</var>}<a class="self-link" href="#mult-num"></a></dfn>)
			indicates that the preceding type, word, or group occurs <var>A</var> times. 
    <li>A comma-separated pair of numbers in curly braces (<dfn data-dfn-type="grammar" data-export id="mult-num-range">{<var>A</var>,<var>B</var>}<a class="self-link" href="#mult-num-range"></a></dfn>)
			indicates that the preceding type, word, or group occurs at least <var>A</var> and at most <var>B</var> times.
			The <var>B</var> may be omitted ({<var>A</var>,})
			to indicate that there must be at least <var>A</var> repetitions,
			with no upper bound on the number of repetitions. 
    <li>A hash mark (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="mult-comma">#</dfn>) indicates that the preceding type, word, or
			group occurs one or more times, separated by comma tokens
			(which may optionally be surrounded by <a href="https://www.w3.org/TR/css-syntax/#whitespace">white space</a> and/or comments).
			It may optionally be followed by the curly brace forms, above,
			to indicate precisely how many times the repetition occurs,
			like <span class="css">&lt;length>#{1,4}</span>. 
    <li>An exclamation point (<dfn data-dfn-type="grammar" data-export id="mult-req">!<a class="self-link" href="#mult-req"></a></dfn>) after a group indicates that the group is required
			and must produce at least one value;
			even if the grammar of the items within the group would otherwise allow the entire contents to be omitted,
			at least one component value must not be omitted. 
   </ul>
   <p>For repeated component values (indicated by <span class="css">*</span>, <span class="css">+</span>, or <span class="css">#</span>),
	UAs must support at least 20 repetitions of the component.
	If a property value contains more than the supported number of repetitions,
	the declaration must be ignored as if it were invalid.</p>
   <h3 class="heading settled" data-level="2.4" id="combinator-multiplier-patterns"><span class="secno">2.4. </span><span class="content"> Combinator and Multiplier Patterns</span><a class="self-link" href="#combinator-multiplier-patterns"></a></h3>
   <p>There are a small set of common ways to combine multiple independent <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#component-value" id="ref-for-component-value">component values</a> in particular numbers and orders.
	In particular, it’s common to want to express that,
	from a set of component value,
	the author must select zero or more, one or more, or all of them,
	and in either the order specified in the grammar or in any order.</p>
   <p>All of these can be easily expressed using simple patterns of <a href="#component-combinators">combinators</a> and <a href="#component-multipliers">multipliers</a>:</p>
   <table class="data">
    <thead>
     <tr>
      <th>
      <th>in order 
      <th>any order 
    <tbody>
     <tr>
      <th>zero or more 
      <td><code>A? B? C?</code> 
      <td><code>A? || B? || C?</code> 
     <tr>
      <th>one or more 
      <td><code>[ A? B? C? ]!</code> 
      <td><code>A || B || C</code> 
     <tr>
      <th>all 
      <td><code>A B C </code> 
      <td><code>A &amp;&amp; B &amp;&amp; C</code> 
   </table>
   <p>Note that all of the "any order" possibilities are expressed using combinators,
	while the "in order" possibilities are all variants on juxtaposition.</p>
   <h3 class="heading settled" data-level="2.5" id="component-whitespace"><span class="secno">2.5. </span><span class="content"> Component Values and White Space</span><a class="self-link" href="#component-whitespace"></a></h3>
   <p>Unless otherwise specified, <a href="https://www.w3.org/TR/css-syntax/#whitespace">white space</a> and/or comments may appear before, after, and/or between
	components combined using the above <a href="#component-combinators">combinators</a> and <a href="#component-multipliers">multipliers</a>.</p>
   <p class="note" role="note"><span>Note:</span> In many cases, spaces will in fact be <em>required</em> between components
	in order to distinguish them from each other.
	For example, the value <span class="css">1em2em</span> would be parsed as a single <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token" id="ref-for-typedef-dimension-token">&lt;dimension-token></a> with the number <span class="css">1</span> and the identifier <span class="css">em2em</span>,
	which is an invalid unit.
	In this case, a space would be required before the <span class="css">2</span> to get this parsed as the two lengths <span class="css">1em</span> and <span class="css">2em</span>.</p>
   <h3 class="heading settled" data-level="2.6" id="value-examples"><span class="secno">2.6. </span><span class="content"> Property Value Examples</span><a class="self-link" href="#value-examples"></a></h3>
   <p>Below are some examples of properties with their corresponding value
	definition fields</p>
   <div class="example" id="example-78954521">
    <a class="self-link" href="#example-78954521"></a> 
    <table class="data" id="propvalues">
     <thead>
      <tr>
       <th>Property 
       <th>Value definition field 
       <th>Example value 
     <tbody>
      <tr>
       <td><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-break-3/#propdef-orphans" id="ref-for-propdef-orphans">orphans</a> 
       <td>&lt;integer> 
       <td><span class="css">3</span> 
      <tr>
       <td><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align">text-align</a> 
       <td>left | right | center | justify 
       <td><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-text-align-center" id="ref-for-valdef-text-align-center">center</a> 
      <tr>
       <td><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-top" id="ref-for-propdef-padding-top">padding-top</a> 
       <td>&lt;length> | &lt;percentage> 
       <td><span class="css">5%</span> 
      <tr>
       <td><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-4/#propdef-outline-color" id="ref-for-propdef-outline-color">outline-color</a> 
       <td>&lt;color> | invert 
       <td><span class="css">#fefefe</span> 
      <tr>
       <td><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration" id="ref-for-propdef-text-decoration">text-decoration</a> 
       <td>none | underline || overline || line-through || blink 
       <td><span class="css">overline underline</span> 
      <tr>
       <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-family" id="ref-for-propdef-font-family">font-family</a> 
       <td>[ &lt;family-name> | &lt;generic-family> ]# 
       <td><span class="css">"Gill Sans", Futura, sans-serif</span> 
      <tr>
       <td><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width③">border-width</a> 
       <td>[ &lt;length> | thick | medium | thin ]{1,4} 
       <td><span class="css">2px medium 4px</span> 
      <tr>
       <td><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow" id="ref-for-propdef-box-shadow">box-shadow</a> 
       <td>[ inset? &amp;&amp; &lt;length>{2,4} &amp;&amp; &lt;color>? ]# | none 
       <td><span class="css">3px 3px rgba(50%, 50%, 50%, 50%), lemonchiffon 0 0 4px inset</span> 
    </table>
   </div>
   <h2 class="heading settled" data-level="3" id="combining-values"><span class="secno">3. </span><span class="content"> Combining Values: Interpolation, Addition, and Accumulation</span><a class="self-link" href="#combining-values"></a></h2>
   <p>Some procedures, for example <a href="https://www.w3.org/TR/css-transitions/">transitions</a> and <a href="https://www.w3.org/TR/css-animations/">animations</a>, <dfn data-dfn-type="dfn" data-export id="combine">combine<a class="self-link" href="#combine"></a></dfn> two CSS property values.
	The following combining operations—<wbr>on the two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value">computed values</a> <var>V<sub>a</sub></var> and <var>V<sub>B</sub></var> yielding the <span id="ref-for-computed-value①">computed value</span> <var>V<sub>result</sub></var>—<wbr>are defined:</p>
   <dl>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="interpolation | interpolate | value interpolation | interpolation procedure" id="interpolation">interpolation</dfn> 
    <dd>
      Given two property values <var>V<sub>a</sub></var> and <var>V<sub>B</sub></var>,
			produces an intermediate value <var>V<sub>result</sub></var> at a distance of <var>p</var> along the interval between <var>V<sub>a</sub></var> and <var>V<sub>B</sub></var> such that <var>p</var> = 0 produces <var>V<sub>a</sub></var> and <var>p</var> = 1 produces <var>V</var><sub>B</sub>. 
     <p>The range of <var>p</var> is (−∞, ∞)
			due to the effect of <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function">timing functions</a>.
			As a result, this procedure must also define
			extrapolation behavior for <var>p</var> outside [0, 1].</p>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="add | addition" data-lt="value addition | addition procedure" id="addition">addition</dfn> 
    <dd>
      Given two property values <var>V<sub>a</sub></var> and <var>V<sub>B</sub></var>,
			returns the sum of the two properties, <var>V</var><sub>result</sub>.
			For addition that is not commutative
			(for example, matrix multiplication) <var>V<sub>a</sub></var> represents
			the first term of the operation and <var>V<sub>B</sub></var> represents
			the second. 
     <p class="note" role="note"><span>Note:</span> While <a data-link-type="dfn" href="#addition" id="ref-for-addition">addition</a> can often be expressed
			in terms of the same weighted sum function
			used to define <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation">interpolation</a>,
			this is not always the case.
			For example, interpolation of transform matrices involves
			decomposing and interpolating the matrix components
			whilst addition relies on matrix multiplication.</p>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="accumulate | accumulation" data-lt="value accumulation | accumulation procedure" id="accumulation">accumulation</dfn> 
    <dd>
      Given two property values <var>V<sub>a</sub></var> and <var>V<sub>B</sub></var>,
			returns the result, <var>V<sub>result</sub></var>,
			of combining the two operands
			such that <var>V<sub>B</sub></var> is treated as a <em>delta</em> from <var>V<sub>a</sub></var>.
			For accumulation that is not commutative
			(for example, accumulation of mismatched transform lists) <var>V<sub>a</sub></var> represents the first term of the operation
			and <var>V<sub>B</sub></var> represents the second. 
     <div class="note" role="note">
       Note: For many types of animation such as numbers or lengths, <a data-link-type="dfn" href="#accumulation" id="ref-for-accumulation">accumulation</a> is defined to be identical
				to <a data-link-type="dfn" href="#addition" id="ref-for-addition①">addition</a>. 
      <p>A common case where the definitions differ
				is for list-based types
				where <a data-link-type="dfn" href="#addition" id="ref-for-addition②">addition</a> may be defined as appending to a list
				whilst <a data-link-type="dfn" href="#accumulation" id="ref-for-accumulation①">accumulation</a> may be defined
				as component-based addition.
				For example, the filter list values <span class="css">blur(2)</span> and <span class="css">blur(3)</span>,
				when <span id="ref-for-addition③">added</span> together would produce <span class="css">blur(2) blur(3)</span>,
				but when <span id="ref-for-accumulation②">accumulated</span> would produce <span class="css">blur(5)</span>.</p>
     </div>
   </dl>
   <p>These operations are only defined on <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value②">computed values</a>.
	(As a result, it is not necessary to define, for example,
	how to add a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> value of <span class="css">15pt</span> with <span class="css">5em</span> since such values will be resolved to their <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit">canonical unit</a> before being passed to any of the above procedures.)</p>
   <p>If a value type does not define a specific procedure for <a data-link-type="dfn" href="#addition" id="ref-for-addition④">addition</a> or is defined as <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="not-additive">not additive</dfn>,
	its <span id="ref-for-addition⑤">addition</span> operation is simply <var>V<sub>result</sub></var> = <var>V<sub>a</sub></var>.</p>
   <p>If a value types does not define a specific procedure for <a data-link-type="dfn" href="#accumulation" id="ref-for-accumulation③">accumulation</a>,
	its <span id="ref-for-accumulation④">accumulation</span> operation is identical to <a data-link-type="dfn" href="#addition" id="ref-for-addition⑥">addition</a>.</p>
   <h2 class="heading settled" data-level="4" id="textual-values"><span class="secno">4. </span><span class="content"> Textual Data Types</span><a class="self-link" href="#textual-values"></a></h2>
   <p>The <dfn data-dfn-for="CSS" data-dfn-type="dfn" data-export id="css-textual-data-types">textual data types<a class="self-link" href="#css-textual-data-types"></a></dfn> include
	various keywords and identifiers
	as well as strings (<a class="production css" data-link-type="type" href="#string-value" id="ref-for-string-value">&lt;string></a>) and URLs (<a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value">&lt;url></a>).
	Aside from the casing of <a href="#keywords">pre-defined keywords</a> or as explicitly defined for a given property,
	no normalization is performed,
	not even Unicode normalization:
	the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#specified-value" id="ref-for-specified-value">specified</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value③">computed value</a> of a property
	are exactly the provided Unicode values after parsing
	(which includes character set conversion and <a href="https://www.w3.org/TR/css-syntax-3/#escaping">escaping</a>). <a data-link-type="biblio" href="#biblio-unicode">[UNICODE]</a> <a data-link-type="biblio" href="#biblio-css3syn">[CSS3SYN]</a></p>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="CSS identifier | CSS ident | identifier | ident" id="css-identifier">CSS identifiers</dfn>,
	generically denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-ident">&lt;ident></dfn>,
	consist of a sequence of characters conforming to the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-ident-token" id="ref-for-typedef-ident-token">&lt;ident-token></a> grammar. <a data-link-type="biblio" href="#biblio-css3syn">[CSS3SYN]</a> Identifiers cannot be quoted;
	otherwise they would be interpreted as strings.
	CSS properties accept two classes of <a data-link-type="dfn" href="#css-identifier" id="ref-for-css-identifier">identifiers</a>: <a href="#keywords">pre-defined keywords</a> and <a href="#custom-idents">author-defined identifiers</a>.</p>
   <p class="note" role="note"><span>Note:</span> The <a class="production css" data-link-type="type" href="#typedef-ident" id="ref-for-typedef-ident">&lt;ident></a> production is not meant for property value definitions—<wbr><a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value③">&lt;custom-ident></a> should be used instead.
	It is provided as a convenience for defining other syntactic constructs.</p>
   <p>All textual data types <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation①">interpolate</a> as <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#discrete" id="ref-for-discrete">discrete</a> and are <a data-link-type="dfn" href="#not-additive" id="ref-for-not-additive">not additive</a>.</p>
   <h3 class="heading settled" data-level="4.1" id="keywords"><span class="secno">4.1. </span><span class="content"> Pre-defined Keywords</span><a class="self-link" href="#keywords"></a></h3>
   <p>In the value definition fields, <dfn data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="keyword" id="css-keyword">keywords<a class="self-link" href="#css-keyword"></a></dfn> with a pre-defined meaning appear literally.
	Keywords are <a data-link-type="dfn" href="#css-identifier" id="ref-for-css-identifier①">CSS identifiers</a> and are interpreted <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive">ASCII case-insensitively</a> (i.e., [a-z] and [A-Z] are equivalent).</p>
   <div class="example" id="example-9d0ae504">
    <a class="self-link" href="#example-9d0ae504"></a> For example, here is the value definition for the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse">border-collapse</a> property: 
<pre>Value: collapse | separate</pre>
    <p>And here is an example of its use:</p>
<pre>table { border-collapse: separate }</pre>
   </div>
   <h4 class="heading settled" data-level="4.1.1" id="common-keywords"><span class="secno">4.1.1. </span><span class="content"> CSS-wide keywords: <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-initial" id="ref-for-valdef-all-initial">initial</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit" id="ref-for-valdef-all-inherit①">inherit</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-unset" id="ref-for-valdef-all-unset">unset</a></span><a class="self-link" href="#common-keywords"></a></h4>
   <p>As defined <a href="#component-types">above</a>,
	all properties accept the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="css-wide-keywords">CSS-wide keywords</dfn>,
	which represent value computations common to all CSS properties.</p>
   <p>The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-initial" id="ref-for-valdef-all-initial①">initial</a> keyword represents the value specified as the property’s initial value.
	The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit" id="ref-for-valdef-all-inherit②">inherit</a> keyword represents the computed value of the property on the element’s parent.
	The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-unset" id="ref-for-valdef-all-unset①">unset</a> keyword acts as either <span class="css" id="ref-for-valdef-all-inherit③">inherit</span> or <span class="css" id="ref-for-valdef-all-initial②">initial</span>,
	depending on whether the property is inherited or not.
	All of these keywords are normatively defined in the Cascade module. <a data-link-type="biblio" href="#biblio-css3cascade">[CSS3CASCADE]</a></p>
   <p>Other CSS specifications can define additional CSS-wide keywords.</p>
   <h3 class="heading settled" data-level="4.2" id="custom-idents"><span class="secno">4.2. </span><span class="content"> Author-defined Identifiers: the <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value④">&lt;custom-ident></a> type</span><a class="self-link" href="#custom-idents"></a></h3>
   <p>Some properties accept arbitrary author-defined identifiers as a component value.
	This generic data type is denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="identifier-value">&lt;custom-ident></dfn>,
	and represents any valid CSS <a data-link-type="dfn" href="#css-identifier" id="ref-for-css-identifier②">identifier</a> that would not be misinterpreted as a pre-defined keyword in that property’s value definition.
	Such identifiers are fully <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#case-sensitive" id="ref-for-case-sensitive">case-sensitive</a> (meaning they’re compared by codepoint),
	even in the ASCII range
	(e.g. <span class="css">example</span> and <span class="css">EXAMPLE</span> are two different, unrelated user-defined identifiers).</p>
   <p>The <a data-link-type="dfn" href="#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> are not valid <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value⑤">&lt;custom-ident></a>s.
	The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-ui-4/#valdef-cursor-default" id="ref-for-valdef-cursor-default">default</a> keyword is reserved
	and is also not a valid <span class="production" id="ref-for-identifier-value⑥">&lt;custom-ident></span>.
	Specifications using <span class="production" id="ref-for-identifier-value⑦">&lt;custom-ident></span> must specify clearly
	what other keywords are excluded from <span class="production" id="ref-for-identifier-value⑧">&lt;custom-ident></span>, if any—<wbr>for example by saying that any pre-defined keywords in that property’s value definition are excluded.
	Excluded keywords are excluded in all <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive①">ASCII case permutations</a>.</p>
   <p>When parsing positionally-ambiguous keywords in a property value,
	a <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value⑨">&lt;custom-ident></a> production can only claim the keyword if no other unfulfilled production can claim it.</p>
   <div class="example" id="example-950e3618"><a class="self-link" href="#example-950e3618"></a> For example, the shorthand declaration <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation" id="ref-for-propdef-animation">animation: ease-in ease-out</a> is equivalent to the longhand declarations <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function" id="ref-for-propdef-animation-timing-function">animation-timing-function: ease-in; animation-name: ease-out;</a>. <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-easing-1/#valdef-cubic-bezier-easing-function-ease-in" id="ref-for-valdef-cubic-bezier-easing-function-ease-in">ease-in</a> is claimed by the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-easing-1/#typedef-easing-function" id="ref-for-typedef-easing-function">&lt;easing-function></a> production belonging to <span class="property" id="ref-for-propdef-animation-timing-function①">animation-timing-function</span>,
		leaving <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-easing-1/#valdef-cubic-bezier-easing-function-ease-out" id="ref-for-valdef-cubic-bezier-easing-function-ease-out">ease-out</a> to be claimed by the <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value①⓪">&lt;custom-ident></a> production belonging to <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-name" id="ref-for-propdef-animation-name">animation-name</a>. </div>
   <p class="note" role="note"><span>Note:</span> When designing grammars with <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value①①">&lt;custom-ident></a>,
	the <span class="production" id="ref-for-identifier-value①②">&lt;custom-ident></span> should always be "positionally unambiguous",
	so that it’s impossible to conflict with any keyword values in the property.</p>
   <h3 class="heading settled" data-level="4.3" id="strings"><span class="secno">4.3. </span><span class="content"> Quoted Strings: the <a class="production css" data-link-type="type" href="#string-value" id="ref-for-string-value①">&lt;string></a> type</span><a class="self-link" href="#strings"></a></h3>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="string" id="string">Strings</dfn> are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="string-value">&lt;string></dfn> and consist of a sequence of characters delimited by double quotes or
	single quotes. They correspond to the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-string-token" id="ref-for-typedef-string-token">&lt;string-token></a> production
	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> <a data-link-type="biblio" href="#biblio-css3syn">[CSS3SYN]</a>.</p>
   <div class="example" id="example-9204e1e4">
    <a class="self-link" href="#example-9204e1e4"></a> Double quotes cannot occur inside double quotes, unless <a href="https://www.w3.org/TR/CSS21/syndata.html#escaped-characters">escaped</a> (as <code>"\""</code> or as <code>"\22"</code>).
		Analogously for single quotes (<code>'\''</code> or <code>'\27'</code>). 
<pre>content: "this is a 'string'.";
content: "this is a \"string\".";
content: 'this is a "string".';
content: 'this is a \'string\'.'
</pre>
   </div>
   <p>It is possible to break strings over several lines, for aesthetic or
	other reasons, but in such a case the newline itself has to be escaped
	with a backslash (\). The newline is subsequently removed from the
	string. For instance, the following two selectors are exactly the
	same:</p>
   <div class="example" id="example-4f7429ed">
    <a class="self-link" href="#example-4f7429ed"></a> 
    <p style="display:none">Example(s): </p>
<pre>a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}
</pre>
   </div>
   <p>Since a string cannot directly represent a newline, to include a
	newline in a string, use the escape "\A". (Hexadecimal A is the line
	feed character in Unicode (U+000A), but represents the generic notion
	of "newline" in CSS.)</p>
   <h3 class="heading settled" data-level="4.4" id="urls"><span class="secno">4.4. </span><span class="content"> Resource Locators: the <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value①">&lt;url></a> type</span><a class="self-link" href="#urls"></a></h3>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-url">url()</dfn> <a data-link-type="dfn" href="#functional-notation" id="ref-for-functional-notation">functional notation</a>,
	denoted by <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value②">&lt;url></a>,
	represents a <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url" id="ref-for-concept-url">URL</a>,
	which is a pointer to a resource.
	The typical syntax of a <span class="production" id="ref-for-url-value③">&lt;url></span> is:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="url-value">&lt;url></dfn> = url( <a class="production" data-link-type="type" href="#string-value" id="ref-for-string-value②">&lt;string></a> <a class="production" data-link-type="type" href="#typedef-url-modifier" id="ref-for-typedef-url-modifier">&lt;url-modifier></a><a data-link-type="grammar" href="#mult-zero-plus" id="ref-for-mult-zero-plus">*</a> )</pre>
   <div class="example" id="example-5917b301">
    <a class="self-link" href="#example-5917b301"></a> Below is an example of a URL being used as a background image: 
<pre>body { background: url("http://www.example.com/pinkish.gif") }</pre>
   </div>
   <p>A <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value④">&lt;url></a> may alternately be written without quotation marks around the URL itself,
	in which case it is <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#consume-a-url-token" id="ref-for-consume-a-url-token">specially-parsed</a> as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-url-token" id="ref-for-typedef-url-token">&lt;url-token></a> <a data-link-type="biblio" href="#biblio-css3syn">[CSS3SYN]</a>.</p>
   <div class="example" id="example-2e04cf61">
    <a class="self-link" href="#example-2e04cf61"></a> For example, the following declarations are identical: 
<pre>background: url("http://www.example.com/pinkish.gif");
background: url(http://www.example.com/pinkish.gif);
</pre>
   </div>
   <p class="note" role="note"><span>Note:</span> This unquoted syntax cannot accept a <a class="production css" data-link-type="type" href="#typedef-url-modifier" id="ref-for-typedef-url-modifier①">&lt;url-modifier></a> argument
	and has extra escaping requirements:
	parentheses, <a href="https://www.w3.org/TR/css-syntax/#whitespace">whitespace</a> characters,
	single quotes (') and double quotes (") appearing in a URL
	must be escaped with a backslash,
	e.g. <span class="css">url(open\(parens)</span>, <span class="css">url(close\)parens)</span>.
	(In quoted <a class="production css" data-link-type="type" href="#string-value" id="ref-for-string-value③">&lt;string></a> <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url">url()</a>s,
	only newlines and the character used to quote the string need to be escaped.)
	Depending on the type of URL,
	it might also be possible to write these characters as URL-escapes
	(e.g. <span class="css">url(open%28parens)</span> or <span class="css">url(close%29parens)</span>)
	as described in <a data-link-type="biblio" href="#biblio-url">[URL]</a>.</p>
   <p>Some CSS contexts (such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#at-ruledef-import" id="ref-for-at-ruledef-import">@import</a>) also allow a <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value⑤">&lt;url></a> to be represented by a bare <a class="production css" data-link-type="type" href="#string-value" id="ref-for-string-value④">&lt;string></a>, without the <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url①">url()</a> wrapper.
	In such cases the string behaves identically to a <span class="css" id="ref-for-funcdef-url②">url()</span> function containing that string.</p>
   <div class="example" id="example-d264fc07">
    <a class="self-link" href="#example-d264fc07"></a> For example, the following statements are identical: 
<pre>@import url("base-theme.css");
@import "base-theme.css";
</pre>
   </div>
   <h4 class="heading settled" data-level="4.4.1" id="relative-urls"><span class="secno">4.4.1. </span><span class="content"> Relative URLs</span><a class="self-link" href="#relative-urls"></a></h4>
   <p>In order to create modular style sheets that are not dependent on
	the absolute location of a resource, authors should use relative URLs.
	Relative URLs (as defined in <a data-link-type="biblio" href="#biblio-url">[URL]</a>) are resolved to full URLs
	using a base URL. RFC 3986, section 3, defines the normative
	algorithm for this process.
	For CSS style sheets, the base URL is that of the style sheet itself,
	not that of the styled source document.
	Style sheets embedded within a document have
	the base URL associated with their container.</p>
   <p>When a <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value⑥">&lt;url></a> appears in the computed value of a property,
	it is resolved to an absolute URL,
	as described in the preceding paragraph.
	The computed value of a URL that the UA cannot resolve to an absolute URL is the specified value.</p>
   <div class="example" id="example-b514611a">
    <a class="self-link" href="#example-b514611a"></a> For example, suppose the following rule: 
<pre>body { background: url("tile.png") }</pre>
    <p>is located in a style sheet designated by the URL:</p>
<pre>http://www.example.org/style/basic.css</pre>
    <p>The background of the source document’s <code>&lt;body></code> will be tiled with whatever image is described by the resource designated by the URL:</p>
<pre>http://www.example.org/style/tile.png</pre>
    <p>The same image will be used regardless of the URL of the source document containing the <code>&lt;body></code>.</p>
   </div>
   <h5 class="heading settled" data-level="4.4.1.1" id="local-urls"><span class="secno">4.4.1.1. </span><span class="content"> Fragment URLs</span><a class="self-link" href="#local-urls"></a></h5>
   <p>To work around some common eccentriticites in browser URL handling,
	CSS has special behavior for fragment-only urls.</p>
   <p>If a <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url③">url()</a>’s value starts with a U+0023 NUMBER SIGN (<code>#</code>) character,
	parse it as per normal for URLs,
	but additionally set the <dfn class="dfn-paneled" data-dfn-for="url()" data-dfn-type="dfn" data-export id="url-local-url-flag">local url flag</dfn> of the <span class="css" id="ref-for-funcdef-url④">url()</span>.</p>
   <p>When matching a <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url⑤">url()</a> with the <a data-link-type="dfn" href="#url-local-url-flag" id="ref-for-url-local-url-flag">local url flag</a> set,
	ignore everything but the URL’s fragment,
	and resolve that fragment against the current document that relative URLs are resolved against.
	This reference must always be treated as same-document
	(rather than cross-document).</p>
   <p>When <a href="https://www.w3.org/TR/cssom-1/#serializing-css-values">serializing</a> a <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url⑥">url()</a> with the <a data-link-type="dfn" href="#url-local-url-flag" id="ref-for-url-local-url-flag①">local url flag</a> set,
	it must serialize as just the fragment.</p>
   <details class="note">
    <summary>What “browser eccentricities”?</summary>
    <p>Theoretically, browsers should re-resolve any relative URLs,
		including fragment-only URLs,
		whenever the document’s base URL changes
		(such as through mutation of the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#the-base-element" id="ref-for-the-base-element">base</a></code> element,
		or calling <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/history.html#dom-history-pushstate" id="ref-for-dom-history-pushstate">pushState()</a></code>).
		In many cases they don’t, however,
		and so without special handling,
		fragment-only URLs will suddenly become cross-document references
		(pointing at the previous base URL)
		and break in many of the places they’re used.</p>
    <p>Since fragment-only URLs express a clear semantic
		of wanting to refer to the current document
		regardless of what its current URL is,
		this hack preserves the expected behavior at least in these cases.</p>
   </details>
   <h4 class="heading settled" data-level="4.4.2" id="url-empty"><span class="secno">4.4.2. </span><span class="content"> Empty URLs</span><a class="self-link" href="#url-empty"></a></h4>
   <p>If the value of the <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url⑦">url()</a> is the empty string
	(like <span class="css">url("")</span> or <span class="css" id="ref-for-funcdef-url⑧">url()</span>),
	the url must resolve to an invalid resource
	(similar to what the url <span class="css">about:invalid</span> does).</p>
   <p class="note" role="note"><span>Note:</span> This matches the behavior of empty urls for embedded resources elsewhere in the web platform,
	and avoids excess traffic re-requesting the stylesheet or host document
	due to editting mistakes leaving the <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url⑨">url()</a> value empty,
	which are almost certain to be invalid resources for whatever the <span class="css" id="ref-for-funcdef-url①⓪">url()</span> shows up in.
	Linking on the web platform <em>does</em> allow empty urls,
	so if/when CSS gains some functionality to control hyperlinks,
	this restriction can be relaxed in those contexts.</p>
   <h4 class="heading settled" data-level="4.4.3" id="url-modifiers"><span class="secno">4.4.3. </span><span class="content"> URL Modifiers</span><a class="self-link" href="#url-modifiers"></a></h4>
   <p>The <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url①①">url()</a> function supports specifying additional <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-url-modifier">&lt;url-modifier></dfn>s,
	which change the meaning or the interpretation of the URL somehow.
	A <a class="production css" data-link-type="type" href="#typedef-url-modifier" id="ref-for-typedef-url-modifier②">&lt;url-modifier></a> is either an <a class="production css" data-link-type="type" href="#typedef-ident" id="ref-for-typedef-ident①">&lt;ident></a> or a <a data-link-type="dfn" href="#functional-notation" id="ref-for-functional-notation①">functional notation</a>.</p>
   <p>This specification does not define any <a class="production css" data-link-type="type" href="#typedef-url-modifier" id="ref-for-typedef-url-modifier③">&lt;url-modifier></a>s,
	but other specs may do so.</p>
   <p class="note" role="note"><span>Note:</span> A <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value⑦">&lt;url></a> that is either unquoted or not wrapped in <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url①②">url()</a> notation
	cannot accept any <a class="production css" data-link-type="type" href="#typedef-url-modifier" id="ref-for-typedef-url-modifier④">&lt;url-modifier></a>s.</p>
   <h2 class="heading settled" data-level="5" id="numeric-types"><span class="secno">5. </span><span class="content"> Numeric Data Types</span><a class="self-link" href="#numeric-types"></a></h2>
   <p>Numeric data types are used to represent
	quantities, indexes, positions, and other such values.
	Although many syntactic variations can exist
	in expressing the quantity (numeric aspect) in a given numeric value,
	the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#specified-value" id="ref-for-specified-value①">specified</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value④">computed value</a> do not distinguish these variations:
	they represent the value’s abstract quantity,
	not its syntactic representation.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="numeric-data-types">numeric data types</dfn> include <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value③">&lt;integer></a>, <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value">&lt;number></a>, <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①">&lt;percentage></a>,
	and various <a data-link-type="dfn" href="#dimension" id="ref-for-dimension">dimensions</a> including <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>, <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value" title="Expands to: turn | rad | grad | deg">&lt;angle></a>, <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value" title="Expands to: s | ms">&lt;time></a>, <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value" title="Expands to: hz | khz">&lt;frequency></a>, and <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value" title="Expands to: dppx | x | dpcm | dpi">&lt;resolution></a>.</p>
   <p class="note" role="note"><span>Note:</span> While general-purpose <a data-link-type="dfn" href="#dimension" id="ref-for-dimension①">dimensions</a> are defined here,
	some other modules define additional data types
	(e.g. <a data-link-type="biblio" href="#biblio-css-grid-1">[css-grid-1]</a> introduces <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-1/#valdef-flex-fr" id="ref-for-valdef-flex-fr">fr</a> units)
	whose usage is more localized.</p>
   <h3 class="heading settled" data-level="5.1" id="numeric-ranges"><span class="secno">5.1. </span><span class="content"> Range Restrictions and Range Definition Notation</span><a class="self-link" href="#numeric-ranges"></a></h3>
   <p>Properties can restrict numeric values to some range.
	If the value is outside the allowed range,
	then unless otherwise specified,
	the declaration is invalid and must be <a href="https://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.
	Range restrictions can be annotated in the numeric type notation
	using <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="bracketed range notation" data-noexport id="css-bracketed-range-notation">CSS bracketed range notation</dfn>—<wbr><code>[<var>min</var>,<var>max</var>]</code>—<wbr>within the angle brackets, after the identifying keyword,
	indicating a closed range
	between (and including) <var>min</var> and <var>max</var>.
	For example, <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value④">&lt;integer [0,10]></a> indicates an integer between <span class="css">0</span> and <span class="css">10</span>, inclusive.</p>
   <p class="note" role="note"><span>Note:</span> CSS values generally do not allow open ranges;
	thus only square-bracket notation is used.</p>
   <p>CSS theoretically supports infinite precision and infinite ranges for all value types;
	however in reality implementations have finite capacity.
	UAs should support reasonably useful ranges and precisions.
	Range extremes that are ideally unlimited
	are indicated using ∞ or −∞ as appropriate.</p>
   <p>If no range is indicated,
	either by using the <a data-link-type="dfn" href="#css-bracketed-range-notation" id="ref-for-css-bracketed-range-notation">bracketed range notation</a> or in the property description,
	then <code>[−∞,∞]</code> is assumed.</p>
   <p class="note" role="note"><span>Note:</span> At the time of writing,
	the <a data-link-type="dfn" href="#css-bracketed-range-notation" id="ref-for-css-bracketed-range-notation①">bracketed range notation</a> is new;
	thus in most CSS specifications
	any range limitations are described only in prose.
	(For example, “Negative values are not allowed” or
	“Negative values are invalid”
	indicate a <code>[0,∞]</code> range.)
	This does not make them any less binding.</p>
   <h3 class="heading settled" data-level="5.2" id="integers"><span class="secno">5.2. </span><span class="content"> Integers: the <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value⑤">&lt;integer></a> type</span><a class="self-link" href="#integers"></a></h3>
   <p>Integer values are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="integer-value">&lt;integer></dfn>.</p>
   <p>When written literally,
	an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="integer">integer</dfn> is one or more decimal digits <span class="css">0</span> through <span class="css">9</span> and corresponds to a subset of the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token">&lt;number-token></a> production
	in the CSS Syntax Module <a data-link-type="biblio" href="#biblio-css3syn">[CSS3SYN]</a>.
	The first digit of an integer may be immediately preceded by <span class="css">-</span> or <span class="css">+</span> to indicate the integer’s sign.</p>
   <h4 class="heading settled" data-level="5.2.1" id="combine-integers"><span class="secno">5.2.1. </span><span class="content"> Combination of <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value⑥">&lt;integer></a></span><a class="self-link" href="#combine-integers"></a></h4>
   <p><a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation②">Interpolation</a> of <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value⑦">&lt;integer></a> is defined as <var>V</var><sub>result</sub> =
		round((1 - <var>p</var>) × <var>V<sub>a</sub></var> + <var>p</var> × <var>V<sub>b</sub></var>);
	that is, interpolation happens in the real number space
	as for <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①">&lt;number></a>s, and the result is converted to an <span class="production" id="ref-for-integer-value⑧">&lt;integer></span> by rounding to the nearest integer,
	with values halfway between adjacent integers rounded towards positive infinity.</p>
   <p><a data-link-type="dfn" href="#addition" id="ref-for-addition⑦">Addition</a> of <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②">&lt;number></a> is defined as <var>V<sub>result</sub></var> = <var>V<sub>a</sub></var> + <var>V<sub>b</sub></var></p>
   <h3 class="heading settled" data-level="5.3" id="numbers"><span class="secno">5.3. </span><span class="content"> Real Numbers: the <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③">&lt;number></a> type</span><a class="self-link" href="#numbers"></a></h3>
   <p>Number values are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="number-value">&lt;number></dfn>,
	and represent real numbers, possibly with a fractional component.</p>
   <p>When written literally,
	a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="number">number</dfn> is either an <a data-link-type="dfn" href="#integer" id="ref-for-integer">integer</a>,
	or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits
	and optionally an exponent composed of "e" or "E" and an integer.
	It corresponds to the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token①">&lt;number-token></a> production
	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> <a data-link-type="biblio" href="#biblio-css3syn">[CSS3SYN]</a>.
	As with integers, the first character of a number may be immediately preceded by <span class="css">-</span> or <span class="css">+</span> to indicate the number’s sign.</p>
   <p>The value <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="zero-value">&lt;zero></dfn> represents a literal <a data-link-type="dfn" href="#number" id="ref-for-number">number</a> with the value 0.
	Expressions that merely evaluate to a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value④">&lt;number></a> with the value 0
	(for example, <span class="css">calc(0)</span>)
	do not match <a class="production css" data-link-type="type" href="#zero-value" id="ref-for-zero-value">&lt;zero></a>;
	only literal <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token②">&lt;number-token></a>s do.</p>
   <h4 class="heading settled" data-level="5.3.1" id="combine-numbers"><span class="secno">5.3.1. </span><span class="content"> Combination of <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑤">&lt;number></a></span><a class="self-link" href="#combine-numbers"></a></h4>
   <p><a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation③">Interpolation</a> of <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑥">&lt;number></a> is defined as <var>V</var><sub>result</sub> =
		(1 - <var>p</var>) × <var>V<sub>a</sub></var> + <var>p</var> × <var>V<sub>b</sub></var></p>
   <p><a data-link-type="dfn" href="#addition" id="ref-for-addition⑧">Addition</a> of <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑦">&lt;number></a> is defined as <var>V<sub>result</sub></var> = <var>V<sub>a</sub></var> + <var>V<sub>b</sub></var></p>
   <h3 class="heading settled" data-level="5.4" id="dimensions"><span class="secno">5.4. </span><span class="content"> Numbers with Units: <a data-link-type="dfn" href="#dimension" id="ref-for-dimension②">dimension</a> values</span><a class="self-link" href="#dimensions"></a></h3>
   <p>The general term <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="dimension">dimension</dfn> refers to
	a number with a unit attached to it;
	and is denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-dimension">&lt;dimension></dfn>.</p>
   <p>When written literally,
	a <a data-link-type="dfn" href="#dimension" id="ref-for-dimension③">dimension</a> is a <a data-link-type="dfn" href="#number" id="ref-for-number①">number</a> immediately followed by a unit identifier,
	which is an <a data-link-type="dfn" href="#css-identifier" id="ref-for-css-identifier③">identifier</a>.
	It corresponds to the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token" id="ref-for-typedef-dimension-token①">&lt;dimension-token></a> production
	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> <a data-link-type="biblio" href="#biblio-css3syn">[CSS3SYN]</a>.
	Like keywords, unit identifiers are <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive②">ASCII case-insensitive</a>.</p>
   <p>CSS uses <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension">&lt;dimension></a>s to specify
	distances (<a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value④" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>),
	durations (<a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value①" title="Expands to: s | ms">&lt;time></a>),
	frequencies (<a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value①" title="Expands to: hz | khz">&lt;frequency></a>),
	resolutions (<a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value①" title="Expands to: dppx | x | dpcm | dpi">&lt;resolution></a>),
	and other quantities.</p>
   <h4 class="heading settled" data-level="5.4.1" id="compat"><span class="secno">5.4.1. </span><span class="content"> Compatible Units</span><a class="self-link" href="#compat"></a></h4>
   <p>When <a href="https://www.w3.org/TR/cssom-1/#serializing-css-values">serializing</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑤">computed values</a> <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a>, <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="compatible" id="compatible-units">compatible units</dfn> (those related by a static multiplicative factor,
	like the 96:1 factor between <a class="css" data-link-type="maybe" href="#px" id="ref-for-px">px</a> and <a class="css" data-link-type="maybe" href="#in" id="ref-for-in">in</a>,
	or the the computed <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size">font-size</a> factor between <a class="css" data-link-type="maybe" href="#em" id="ref-for-em">em</a> and <span class="css" id="ref-for-px①">px</span>)
	are converted into a single <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="canonical" id="canonical-unit">canonical unit</dfn>.
	Each group of compatible units defines which among them is the <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit①">canonical unit</a> that will be used for serialization.</p>
   <p>When serializing <a href="https://www.w3.org/TR/cssom-1/#resolved-values">resolved values</a> that are <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value">used values</a>,
	all value types (percentages, numbers, keywords, etc.)
	that represent lengths are considered <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units">compatible</a> with lengths.
	Likewise any future API that returns <span id="ref-for-used-value①">used values</span> must consider any values represent distances/durations/frequencies/etc.
	as <span id="ref-for-compatible-units①">compatible</span> with the relevant class of <a data-link-type="dfn" href="#dimension" id="ref-for-dimension④">dimensions</a>,
	and canonicalize accordingly.</p>
   <h4 class="heading settled" data-level="5.4.2" id="combine-dimensions"><span class="secno">5.4.2. </span><span class="content"> Combination of Dimensions</span><a class="self-link" href="#combine-dimensions"></a></h4>
   <p><a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation④">Interpolation</a> of <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units②">compatible</a> <a data-link-type="dfn" href="#dimension" id="ref-for-dimension⑤">dimensions</a> (for example, two <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value⑤" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> values)
	is defined as <var>V</var><sub>result</sub> =
		(1 - <var>p</var>) × <var>V<sub>a</sub></var> + <var>p</var> × <var>V<sub>b</sub></var></p>
   <p><a data-link-type="dfn" href="#addition" id="ref-for-addition⑨">Addition</a> of <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units③">compatible</a> <a data-link-type="dfn" href="#dimension" id="ref-for-dimension⑥">dimensions</a> is defined as <var>V<sub>result</sub></var> = <var>V<sub>a</sub></var> + <var>V<sub>b</sub></var></p>
   <h3 class="heading settled" data-level="5.5" id="percentages"><span class="secno">5.5. </span><span class="content"> Percentages: the <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②">&lt;percentage></a> type</span><a class="self-link" href="#percentages"></a></h3>
   <p>Percentage values are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="percentage-value">&lt;percentage></dfn>,
	and indicates a value that is some fraction of another reference value.</p>
   <p>When written literally,
	a <dfn data-dfn-type="dfn" data-export id="percentage">percentage<a class="self-link" href="#percentage"></a></dfn> consists of a <a data-link-type="dfn" href="#number" id="ref-for-number②">number</a> immediately followed by a percent sign <span class="css">%</span>.
	It corresponds to the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-percentage-token" id="ref-for-typedef-percentage-token">&lt;percentage-token></a> production
	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> <a data-link-type="biblio" href="#biblio-css3syn">[CSS3SYN]</a>.</p>
   <p>Percentage values are always relative to another quantity,
	for example a length.
	Each property that allows percentages also defines the quantity to which the percentage refers.
	This quantity can be a value of another property for the same element,
	the value of a property for an ancestor element,
	a measurement of the formatting context
	(e.g., the width of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block">containing block</a>),
	or something else.</p>
   <h4 class="heading settled" data-level="5.5.1" id="combine-percentages"><span class="secno">5.5.1. </span><span class="content"> Combination of <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value③">&lt;percentage></a></span><a class="self-link" href="#combine-percentages"></a></h4>
   <p><a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation⑤">Interpolation</a> of <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value④">&lt;percentage></a> is defined as <var>V</var><sub>result</sub> =
		(1 - <var>p</var>) × <var>V<sub>a</sub></var> + <var>p</var> × <var>V<sub>b</sub></var></p>
   <p><a data-link-type="dfn" href="#addition" id="ref-for-addition①⓪">Addition</a> of <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value⑤">&lt;percentage></a> is defined as <var>V<sub>result</sub></var> = <var>V<sub>a</sub></var> + <var>V<sub>b</sub></var></p>
   <h3 class="heading settled" data-level="5.6" id="mixed-percentages"><span class="secno">5.6. </span><span class="content"> Mixing Percentages and Dimensions</span><a class="self-link" href="#mixed-percentages"></a></h3>
   <p>In cases where a <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value⑥">&lt;percentage></a> can represent the same quantity
	as a <a data-link-type="dfn" href="#dimension" id="ref-for-dimension⑦">dimension</a> in the same <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#component-value" id="ref-for-component-value①">component value</a> position,
	and can therefore be combined with them in a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc">calc()</a> expression,
	the following convenience notations may be used in the property grammar:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-length-percentage">&lt;length-percentage></dfn>
    <dd data-md>
     <p>Equivalent to <code class="prod">[ <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value⑥" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one">|</a> <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value⑦">&lt;percentage></a> ]</code>,
where the <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value⑧">&lt;percentage></a> will resolve to a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value⑦" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-frequency-percentage">&lt;frequency-percentage></dfn>
    <dd data-md>
     <p>Equivalent to <code class="prod">[ <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value②" title="Expands to: hz | khz">&lt;frequency></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①">|</a> <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value⑨">&lt;percentage></a> ]</code>,
where the <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①⓪">&lt;percentage></a> will resolve to a <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value③" title="Expands to: hz | khz">&lt;frequency></a>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-angle-percentage">&lt;angle-percentage></dfn>
    <dd data-md>
     <p>Equivalent to <code class="prod">[ <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①" title="Expands to: turn | rad | grad | deg">&lt;angle></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②">|</a> <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①①">&lt;percentage></a> ]</code>,
where the <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①②">&lt;percentage></a> will resolve to an <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value②" title="Expands to: turn | rad | grad | deg">&lt;angle></a>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-time-percentage">&lt;time-percentage></dfn>
    <dd data-md>
     <p>Equivalent to <code class="prod">[ <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value②" title="Expands to: s | ms">&lt;time></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③">|</a> <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①③">&lt;percentage></a> ]</code>,
where the <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①④">&lt;percentage></a> will resolve to a <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value③" title="Expands to: s | ms">&lt;time></a>.</p>
   </dl>
   <div class="example" id="example-ac6b1005">
    <a class="self-link" href="#example-ac6b1005"></a> For example, the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width">width</a> property can accept a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value⑧" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> or a <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①⑤">&lt;percentage></a>,
		both representing a measure of distance.
		This means that <span class="css" id="ref-for-propdef-width①">width: calc(500px + 50%);</span> is allowed—<wbr>both values are converted to absolute lengths and added.
		If the containing block is <span class="css">1000px</span> wide,
		then <span class="css" id="ref-for-propdef-width②">width: 50%;</span> is equivalent to <span class="css" id="ref-for-propdef-width③">width: 500px</span>,
		and <span class="css" id="ref-for-propdef-width④">width: calc(50% + 500px)</span> thus ends up equivalent to <span class="css" id="ref-for-propdef-width⑤">width: calc(500px + 500px)</span> or <span class="css" id="ref-for-propdef-width⑥">width: 1000px</span>. 
    <p>On the other hand, the second and third arguments of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#funcdef-hsl" id="ref-for-funcdef-hsl">hsl()</a> function
		can only be expressed as <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①⑥">&lt;percentage></a>s.
		Although <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①">calc()</a> productions are allowed in their place,
		they can only combine percentages with themselves,
		as in <span class="css">calc(10% + 20%)</span>.</p>
   </div>
   <p class="note" role="note"><span>Note:</span> Specifications should never alternate <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①⑦">&lt;percentage></a> in place of a dimension
	in a grammar unless they are <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units④">compatible</a>.</p>
   <p class="note" role="note"><span>Note:</span> More &lt;TYPE-percentage> productions can be added in the future as needed.
	A &lt;number-percentage> will never be added,
	as <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑧">&lt;number></a> and <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①⑧">&lt;percentage></a> can’t be combined in <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②">calc()</a>.</p>
   <h4 class="heading settled" data-level="5.6.1" id="combine-mixed"><span class="secno">5.6.1. </span><span class="content"> Combination of Percentage and Dimension Mixes</span><a class="self-link" href="#combine-mixed"></a></h4>
   <p><a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation⑥">Interpolation</a> of percengage-dimension value combinations
	(e.g. <a class="production css" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage">&lt;length-percentage></a>, <a class="production css" data-link-type="type" href="#typedef-frequency-percentage" id="ref-for-typedef-frequency-percentage">&lt;frequency-percentage></a>, <a class="production css" data-link-type="type" href="#typedef-angle-percentage" id="ref-for-typedef-angle-percentage">&lt;angle-percentage></a>, <a class="production css" data-link-type="type" href="#typedef-time-percentage" id="ref-for-typedef-time-percentage">&lt;time-percentage></a> or equivalent notations)
	is defined as</p>
   <ul>
    <li> equivalent to <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation⑦">interpolation</a> of <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value⑨" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> if both <var>V<sub>a</sub></var> and <var>V<sub>b</sub></var> are pure <span class="production" id="ref-for-length-value①⓪" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></span> values 
    <li> equivalent to <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation⑧">interpolation</a> of <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①⑨">&lt;percentage></a> if both <var>V<sub>a</sub></var> and <var>V<sub>b</sub></var> are pure <span class="production" id="ref-for-percentage-value②⓪">&lt;percentage></span> values 
    <li> equivalent to converting both values into a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc③">calc()</a> expression
			representing the sum of the dimension type and a percentage
			(each possibly zero)
			and <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation⑨">interpolating</a> each component individually
			(as a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①①" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>/<a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value④" title="Expands to: hz | khz">&lt;frequency></a>/<a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value③" title="Expands to: turn | rad | grad | deg">&lt;angle></a>/<a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value④" title="Expands to: s | ms">&lt;time></a> and as a <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②①">&lt;percentage></a>, respectively) 
   </ul>
   <p><a data-link-type="dfn" href="#addition" id="ref-for-addition①①">Addition</a> of <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②②">&lt;percentage></a> is defined
	the same as <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation①⓪">interpolation</a> except by <span id="ref-for-addition①②">adding</span> each component
	rather than <span id="ref-for-interpolation①①">interpolating</span> it.</p>
   <h2 class="heading settled" data-level="6" id="lengths"><span class="secno">6. </span><span class="content"> Distance Units: the <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①②" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> type</span><a class="self-link" href="#lengths"></a></h2>
   <p>Lengths refer to distance measurements
	and are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="length-value">&lt;length></dfn> in the property definitions.
	A length is a <a data-link-type="dfn" href="#dimension" id="ref-for-dimension⑧">dimension</a>.</p>
   <p>For zero lengths the unit identifier is optional
	(i.e. can be syntactically represented as the <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑨">&lt;number></a> <span class="css">0</span>).
	However, if a <span class="css">0</span> could be parsed as either a <span class="production" id="ref-for-number-value①⓪">&lt;number></span> or a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①③" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> in a property
	(such as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height">line-height</a>),
	it must parse as a <span class="production" id="ref-for-number-value①①">&lt;number></span>.</p>
   <p>Properties may restrict the length value to some range.
	If the value is outside the allowed range,
	the declaration is invalid and must be <a href="https://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.</p>
   <p>While some properties allow negative length values,
	this may complicate the formatting and there may be implementation-specific limits.
	If a negative length value is allowed but cannot be supported,
	it must be converted to the nearest value that can be supported.</p>
   <p>In cases where the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value②">used</a> length cannot be supported,
	user agents must approximate it in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#actual-value" id="ref-for-actual-value">actual</a> value.</p>
   <p>There are two types of length units: <a data-link-type="dfn" href="#relative-length" id="ref-for-relative-length">relative</a> and <a data-link-type="dfn" href="#absolute-length" id="ref-for-absolute-length">absolute</a>.</p>
   <h3 class="heading settled" data-level="6.1" id="relative-lengths"><span class="secno">6.1. </span><span class="content"> Relative Lengths</span><a class="self-link" href="#relative-lengths"></a></h3>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="relative length" data-noexport id="relative-length">Relative length units</dfn> specify a length relative to another length.
	Style sheets that use relative units can more easily scale from one output environment to another.</p>
   <p>The relative units are:</p>
   <table class="data">
    <caption>Informative Summary of Relative Units</caption>
    <thead>
     <tr>
      <th>unit
      <th>relative to 
    <tbody>
     <tr>
      <td><a class="css" data-link-type="maybe" href="#em" id="ref-for-em①">em</a> 
      <td>font size of the element 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#ex" id="ref-for-ex">ex</a> 
      <td>x-height of the element’s font 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#cap" id="ref-for-cap">cap</a> 
      <td>cap height (the nominal height of capital letters) of the element’s font 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#ch" id="ref-for-ch">ch</a> 
      <td>average <a data-link-type="dfn" href="#length-advance-measure" id="ref-for-length-advance-measure">character advance</a> of a narrow glyph in the element’s font,
				as represented by the “0” (ZERO, U+0030) glyph 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#ic" id="ref-for-ic">ic</a> 
      <td>average <a data-link-type="dfn" href="#length-advance-measure" id="ref-for-length-advance-measure①">character advance</a> of a fullwidth glyph in the element’s font,
				as represented by the “水” (CJK water ideograph, U+6C34) glyph 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#rem" id="ref-for-rem">rem</a> 
      <td>font size of the root element 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh">lh</a> 
      <td>line height of the element 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh">rlh</a> 
      <td>line height of the root element 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#vw" id="ref-for-vw">vw</a> 
      <td>1% of viewport’s width 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#vh" id="ref-for-vh">vh</a> 
      <td>1% of viewport’s height 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-length-vi" id="ref-for-valdef-length-vi">vi</a> 
      <td>1% of viewport’s size in the root element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis">inline axis</a> 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-length-vb" id="ref-for-valdef-length-vb">vb</a> 
      <td>1% of viewport’s size in the root element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis">block axis</a> 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#vmin" id="ref-for-vmin">vmin</a> 
      <td>1% of viewport’s smaller dimension 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#vmax" id="ref-for-vmax">vmax</a> 
      <td>1% of viewport’s larger dimension 
   </table>
   <p>Child elements do not inherit the relative values as specified for their parent;
	they inherit the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑥">computed values</a>.</p>
   <h4 class="heading settled" data-level="6.1.1" id="font-relative-lengths"><span class="secno">6.1.1. </span><span class="content"> Font-relative Lengths: the <a class="css" data-link-type="maybe" href="#em" id="ref-for-em②">em</a>, <a class="css" data-link-type="maybe" href="#ex" id="ref-for-ex①">ex</a>, <a class="css" data-link-type="maybe" href="#cap" id="ref-for-cap①">cap</a>, <a class="css" data-link-type="maybe" href="#ch" id="ref-for-ch①">ch</a>, <a class="css" data-link-type="maybe" href="#ic" id="ref-for-ic①">ic</a>, <a class="css" data-link-type="maybe" href="#rem" id="ref-for-rem①">rem</a>, <a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh①">lh</a>, <a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh①">rlh</a> units</span><a class="self-link" href="#font-relative-lengths"></a></h4>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="font-relative-length">font-relative lengths</dfn> refer to the font metrics of the element on which they are used—<wbr>or, in the case of <a class="css" data-link-type="maybe" href="#rem" id="ref-for-rem②">rem</a> and <a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh②">rlh</a>, the metrics of the root element.</p>
   <figure>
     <img alt="The word &apos;Sphinx&apos; annotated with various font metrics: ascender height, to the top of the h’s serif; cap height, to the visually approximate top of the S; the x height, to the visually approximate top of the x; the baseline, along the bottom of S, h, i, n, and x; and the descender height, to the bottom fo the p." src="images/Typography_Line_Terms.svg"> 
    <figcaption> Common typographic metrics </figcaption>
   </figure>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="em" id="em">em unit</dfn> 
    <dd>
      Equal to the computed value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size①">font-size</a> property of the element on which it is used. 
     <div class="example" id="example-83bc8a19">
      <a class="self-link" href="#example-83bc8a19"></a> The rule: 
<pre>h1 { line-height: 1.2em }</pre>
      <p>means that the line height of <code>h1</code> elements
				will be 20% greater than the font size of <code>h1</code> element.
				On the other hand:</p>
<pre>h1 { font-size: 1.2em }</pre>
      <p>means that the font size of <code>h1</code> elements
				will be 20% greater than the computed font size inherited by <code>h1</code> elements.</p>
     </div>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="ex" id="ex">ex unit</dfn> 
    <dd> Equal to the used x-height of the <a href="https://www.w3.org/TR/css3-fonts/#first-available-font">first available font</a> <a data-link-type="biblio" href="#biblio-css3-fonts">[CSS3-FONTS]</a>.
			The x-height is so called because it is often equal to the height of the lowercase "x".
			However, an <a class="css" data-link-type="maybe" href="#ex" id="ref-for-ex②">ex</a> is defined even for fonts that do not contain an "x".
			The x-height of a font can be found in different ways.
			Some fonts contain reliable metrics for the x-height.
			If reliable font metrics are not available,
			UAs may determine the x-height from the height of a lowercase glyph.
			One possible heuristic is to look at
			how far the glyph for the lowercase "o" extends below the baseline,
			and subtract that value from the top of its bounding box.
			In the cases where it is impossible or impractical to determine the x-height,
			a value of 0.5em must be assumed. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="cap" id="cap">cap unit</dfn> 
    <dd> Equal to the used cap-height of the <a href="https://www.w3.org/TR/css3-fonts/#first-available-font">first available font</a> <a data-link-type="biblio" href="#biblio-css3-fonts">[CSS3-FONTS]</a>.
			The cap-height is so called because it is approximately equal to the height of a capital Latin letter.
			However, a <a class="css" data-link-type="maybe" href="#cap" id="ref-for-cap②">cap</a> is defined even for fonts that do not contain Latin letters.
			The cap-height of a font can be found in different ways.
			Some fonts contain reliable metrics for the cap-height.
			If reliable font metrics are not available,
			UAs may determine the cap-height from the height of an uppercase glyph.
			One possible heuristic is to look at
			how far the glyph for the uppercase “O” extends below the baseline,
			and subtract that value from the top of its bounding box.
			In the cases where it is impossible or impractical to determine the cap-height,
			the font’s ascent must be used. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="ch" id="ch">ch unit</dfn> 
    <dd>
      Equal to the used <a data-link-type="dfn" href="#length-advance-measure" id="ref-for-length-advance-measure②">advance measure</a> of the “0” (ZERO, U+0030) glyph
			in the font used to render it.
			(The <dfn class="dfn-paneled" data-dfn-for="<length>" data-dfn-type="dfn" data-export id="length-advance-measure">advance measure</dfn> of a glyph is its advance width or height,
			whichever is in the inline axis of the element.) 
     <p>This measurement is an approximation
			(and in monospace fonts, an exact measure)
			of a single narrow glyph’s <a data-link-type="dfn" href="#length-advance-measure" id="ref-for-length-advance-measure③">advance measure</a>,
			thus allowing measurements based on an expected glyph count.</p>
     <p class="note" role="note"><span>Note:</span> The advance measure of a glyph depends on writing-mode and text-orientation
			as well as font settings, text-transform, and any other properties that affect glyph selection or orientation.</p>
     <p>In the cases where it is impossible or impractical to determine the measure of the “0” glyph,
			it must be assumed to be 0.5em wide by 1em tall.
			Thus, the <a class="css" data-link-type="maybe" href="#ch" id="ref-for-ch②">ch</a> unit falls back to <span class="css">0.5em</span> in the general case,
			and to <span class="css">1em</span> when it would be typeset upright
			(i.e. <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl">vertical-rl</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr">vertical-lr</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation">text-orientation</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright">upright</a>).</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="ic" id="ic">ic unit</dfn> 
    <dd>
      Equal to the used <a data-link-type="dfn" href="#length-advance-measure" id="ref-for-length-advance-measure④">advance measure</a> of the “水” (CJK water ideograph, U+6C34) glyph
			found in the font used to render it. 
     <p>This measurement is a typically an exact measure
			(in the few fonts with proportional fullwidth glyphs, an approximation)
			of a single <a href="http://unicode.org/reports/tr11/#Definitions">fullwidth</a> glyph’s <a data-link-type="dfn" href="#length-advance-measure" id="ref-for-length-advance-measure⑤">advance measure</a>,
			thus allowing measurements based on an expected glyph count.</p>
     <p>In the cases where it is impossible or impractical to determine the ideographic advance measure,
			it must be assumed to be 1em.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="rem" id="rem">rem unit</dfn> 
    <dd> Equal to the computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size②">font-size</a> on the root element.
			When specified on the <span class="property" id="ref-for-propdef-font-size③">font-size</span> property of the root element,
			the <a class="css" data-link-type="maybe" href="#rem" id="ref-for-rem③">rem</a> units refer to the property’s <em>initial value</em>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="lh" id="lh">lh unit</dfn> 
    <dd> Equal to the computed value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height①">line-height</a> property of the element on which it is used,
			converting <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-inline-3/#valdef-line-height-normal" id="ref-for-valdef-line-height-normal">normal</a> to an absolute length
			by using only the metrics of the <a href="https://www.w3.org/TR/css3-fonts/#first-available-font">first available font</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="rlh" id="rlh">rlh unit</dfn> 
    <dd>
      Equal to the computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height②">line-height</a> property on the root element,
			converting <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-inline-3/#valdef-line-height-normal" id="ref-for-valdef-line-height-normal①">normal</a> to an absolute length as above. 
     <p class="note" role="note"><span>Note:</span> Setting the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height">height</a> of an element using either the <a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh②">lh</a> or the <a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh③">rlh</a> units
			does not enable authors to control the actual number of lines in that element.
			These units only enable length calculations based on the theoretical size of an ideal empty line;
			the size of actual lines boxes may differ based on their content.
			In cases where an author wants to limit the number of actual lines in an element,
			the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-4/#propdef-max-lines" id="ref-for-propdef-max-lines">max-lines</a> property can be used instead.</p>
   </dl>
   <p class="issue" id="issue-7dc6ac0d"><a class="self-link" href="#issue-7dc6ac0d"></a> We can potentially add more typographic units,
	like cicero, didot, etc.
	They’re just absolute units,
	and so can be done with the existing units,
	but is there enough desire for them
	(potentially for printing use-cases)
	that it would be worth adding them?
	Or should we just wait for Houdini Custom Units?</p>
   <p>When used outside the context of an element
	(such as in <a data-link-type="dfn" href="https://drafts.csswg.org/mediaqueries-4/#media-query" id="ref-for-media-query">media queries</a>),
	these units refer to the metrics corresponding
	to the initial values of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font" id="ref-for-propdef-font">font</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height③">line-height</a> properties.
	When used in the value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size④">font-size</a> property on the element they refer to,
	they resolve against the computed metrics of the parent element—<wbr>or against the computed metrics corresponding to the initial values
	of the <span class="property" id="ref-for-propdef-font①">font</span> and <span class="property" id="ref-for-propdef-line-height④">line-height</span> properties,
	if the element has no parent.
	Additionally,
	when <a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh③">lh</a> or <a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh④">rlh</a> units are used
	in the value of the <span class="property" id="ref-for-propdef-line-height⑤">line-height</span> property on the element they refer to,
	they resolve against the computed <span class="property" id="ref-for-propdef-line-height⑥">line-height</span> and font metrics of the parent element—<wbr>or the computed metrics corresponding to the initial values
	of the <span class="property" id="ref-for-propdef-font②">font</span> and <span class="property" id="ref-for-propdef-line-height⑦">line-height</span> properties,
	if the element has no parent.
	(The other font-relative units continue to resolve against
	the element’s own metrics when used in <span class="property" id="ref-for-propdef-line-height⑧">line-height</span>.)</p>
   <h4 class="heading settled" data-level="6.1.2" id="viewport-relative-lengths"><span class="secno">6.1.2. </span><span class="content"> Viewport-percentage Lengths: the <a class="css" data-link-type="maybe" href="#vw" id="ref-for-vw①">vw</a>, <a class="css" data-link-type="maybe" href="#vh" id="ref-for-vh①">vh</a>, <a class="css" data-link-type="maybe" href="#valdef-length-vi" id="ref-for-valdef-length-vi①">vi</a>, <a class="css" data-link-type="maybe" href="#valdef-length-vb" id="ref-for-valdef-length-vb①">vb</a>, <a class="css" data-link-type="maybe" href="#vmin" id="ref-for-vmin①">vmin</a>, <a class="css" data-link-type="maybe" href="#vmax" id="ref-for-vmax①">vmax</a> units</span><a class="self-link" href="#viewport-relative-lengths"></a></h4>
   <p>The <dfn data-dfn-type="dfn" data-export id="viewport-percentage-lengths">viewport-percentage lengths<a class="self-link" href="#viewport-percentage-lengths"></a></dfn> are relative to the size of the <a href="https://www.w3.org/TR/CSS21/visudet.html#containing-block-details">initial containing block</a>.
	When the height or width of the initial containing block is changed,
	they are scaled accordingly.
	However, when the value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> on the root element is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-auto" id="ref-for-valdef-overflow-auto">auto</a>,
	any scroll bars are assumed not to exist. <span class="note">Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.</span></p>
   <p>For paged media, the exact definition of the viewport-percentage lengths
	is deferred to <a data-link-type="biblio" href="#biblio-css3page">[CSS3PAGE]</a>.</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="vw" id="vw">vw unit</dfn> 
    <dd>
      Equal to 1% of the width of the initial containing block. 
     <div class="example" id="example-6068ee5d">
      <a class="self-link" href="#example-6068ee5d"></a> In the example below, if the width of the viewport is 200mm,
				the font size of <code>h1</code> elements will be 16mm
				(i.e. (8×200mm)/100). 
<pre>h1 { font-size: 8vw }</pre>
     </div>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="vh" id="vh">vh unit</dfn> 
    <dd> Equal to 1% of the height of the initial containing block. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="vi" id="valdef-length-vi">vi unit</dfn> 
    <dd> Equal to 1% of the size of the initial containing block
			in the direction of the root element’s inline axis. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="vb" id="valdef-length-vb">vb unit</dfn> 
    <dd> Equal to 1% of the size of the initial containing block
			in the direction of the root element’s block axis. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="vmin" id="vmin">vmin unit</dfn> 
    <dd> Equal to the smaller of <a class="css" data-link-type="maybe" href="#vw" id="ref-for-vw②">vw</a> or <a class="css" data-link-type="maybe" href="#vh" id="ref-for-vh②">vh</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export data-lt="vmax" id="vmax">vmax unit</dfn> 
    <dd> Equal to the larger of <a class="css" data-link-type="maybe" href="#vw" id="ref-for-vw③">vw</a> or <a class="css" data-link-type="maybe" href="#vh" id="ref-for-vh③">vh</a>. 
   </dl>
   <p>In situations where there is no root element
	or it hasn’t yet been styled
	(such as when evaluating <a data-link-type="dfn" href="https://drafts.csswg.org/mediaqueries-4/#media-query" id="ref-for-media-query①">media queries</a>),
	the <a class="css" data-link-type="maybe" href="#valdef-length-vi" id="ref-for-valdef-length-vi②">vi</a> and <a class="css" data-link-type="maybe" href="#valdef-length-vb" id="ref-for-valdef-length-vb②">vb</a> units use the initial value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①">writing-mode</a> property
	to determine which axis they correspond to.</p>
   <h3 class="heading settled" data-level="6.2" id="absolute-lengths"><span class="secno">6.2. </span><span class="content"> Absolute Lengths: the <a class="css" data-link-type="maybe" href="#cm" id="ref-for-cm">cm</a>, <a class="css" data-link-type="maybe" href="#mm" id="ref-for-mm">mm</a>, <a class="css" data-link-type="maybe" href="#Q" id="ref-for-Q">Q</a>, <a class="css" data-link-type="maybe" href="#in" id="ref-for-in①">in</a>, <a class="css" data-link-type="maybe" href="#pt" id="ref-for-pt">pt</a>, <a class="css" data-link-type="maybe" href="#pc" id="ref-for-pc">pc</a>, <a class="css" data-link-type="maybe" href="#px" id="ref-for-px②">px</a> units</span><a class="self-link" href="#absolute-lengths"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="absolute length" data-noexport id="absolute-length">absolute length units</dfn> are fixed in relation to each other
	and anchored to some physical measurement.
	They are mainly useful when the output environment is known.
	The absolute units consist of
	the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="physical unit" id="physical-unit">physical units</dfn> (<a class="css" data-link-type="maybe" href="#in" id="ref-for-in②">in</a>, <a class="css" data-link-type="maybe" href="#cm" id="ref-for-cm①">cm</a>, <a class="css" data-link-type="maybe" href="#mm" id="ref-for-mm①">mm</a>, <a class="css" data-link-type="maybe" href="#pt" id="ref-for-pt①">pt</a>, <a class="css" data-link-type="maybe" href="#pc" id="ref-for-pc①">pc</a>, <a class="css" data-link-type="maybe" href="#Q" id="ref-for-Q①">Q</a>)
	and the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="pixel unit | visual angle unit" id="pixel-unit">visual angle/pixel unit</dfn> (<a class="css" data-link-type="maybe" href="#px" id="ref-for-px③">px</a>):</p>
   <table class="data">
    <thead>
     <tr>
      <th>unit 
      <th>name 
      <th>equivalence 
    <tbody>
     <tr>
      <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="cm">cm</dfn> 
      <td>centimeters 
      <td>1cm = 96px/2.54 
     <tr>
      <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="mm">mm</dfn> 
      <td>millimeters 
      <td>1mm = 1/10th of 1cm 
     <tr>
      <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="Q">Q</dfn> 
      <td>quarter-millimeters 
      <td>1Q = 1/40th of 1cm 
     <tr>
      <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="in">in</dfn> 
      <td>inches 
      <td>1in = 2.54cm = 96px 
     <tr>
      <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="pc">pc</dfn> 
      <td>picas 
      <td>1pc = 1/6th of 1in 
     <tr>
      <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="pt">pt</dfn> 
      <td>points 
      <td>1pt = 1/72th of 1in 
     <tr>
      <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="px">px</dfn> 
      <td>pixels 
      <td>1px = 1/96th of 1in 
   </table>
   <div class="example" id="example-afc1f57e">
    <a class="self-link" href="#example-afc1f57e"></a> 
<pre>h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h3 { letter-spacing: 1Q } /* quarter-millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */
p  { font-size: 12px }    /* px */
</pre>
   </div>
   <p>All of the absolute length units are <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units⑤">compatible</a>,
	and <a class="css" data-link-type="maybe" href="#px" id="ref-for-px④">px</a> is their <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit②">canonical unit</a>.</p>
   <p>For a CSS device, these dimensions are <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="anchor unit | anchor" data-noexport id="anchor-unit">anchored</dfn> either</p>
   <ol type="i">
    <li>by relating the <a data-link-type="dfn" href="#physical-unit" id="ref-for-physical-unit">physical units</a> to their physical measurements, or 
    <li>by relating the <a data-link-type="dfn" href="#pixel-unit" id="ref-for-pixel-unit">pixel unit</a> to the <a data-link-type="dfn" href="#reference-pixel" id="ref-for-reference-pixel">reference pixel</a>. 
   </ol>
   <p>For print media at typical viewing distances,
	the <a data-link-type="dfn" href="#anchor-unit" id="ref-for-anchor-unit">anchor unit</a> should be one of the <a data-link-type="dfn" href="#physical-unit" id="ref-for-physical-unit①">physical units</a> (inches, centimeters, etc).
	For screen media (including high-resolution devices),
	low-resolution devices,
	and devices with unusual viewing distances),
	it is recommended instead that the <span id="ref-for-anchor-unit①">anchor unit</span> be the <a data-link-type="dfn" href="#pixel-unit" id="ref-for-pixel-unit①">pixel unit</a>.
	For such devices it is recommended that the <span id="ref-for-pixel-unit②">pixel unit</span> refer to the whole number of device pixels that best approximates the reference pixel.</p>
   <p class="note" role="note"><span>Note:</span> If the <a data-link-type="dfn" href="#anchor-unit" id="ref-for-anchor-unit②">anchor unit</a> is the <a data-link-type="dfn" href="#pixel-unit" id="ref-for-pixel-unit③">pixel unit</a>,
	the <a data-link-type="dfn" href="#physical-unit" id="ref-for-physical-unit②">physical units</a> might not match their physical measurements.
	Alternatively if the <span id="ref-for-anchor-unit③">anchor unit</span> is a <span id="ref-for-physical-unit③">physical unit</span>,
	the <span id="ref-for-pixel-unit④">pixel unit</span> might not map to a whole number of device pixels.</p>
   <p class="note" role="note"><span>Note:</span> This definition of the <a data-link-type="dfn" href="#pixel-unit" id="ref-for-pixel-unit⑤">pixel unit</a> and the <a data-link-type="dfn" href="#physical-unit" id="ref-for-physical-unit④">physical units</a> differs from previous versions of CSS.
	In particular, in previous versions of CSS the <span id="ref-for-pixel-unit⑥">pixel unit</span> and the <span id="ref-for-physical-unit⑤">physical units</span> were not related by a fixed ratio:
	the <span id="ref-for-physical-unit⑥">physical units</span> were always tied to their physical measurements
	while the <span id="ref-for-pixel-unit⑦">pixel unit</span> would vary to most closely match the reference pixel.
	(This change was made because too much existing content relies on the assumption of 96dpi,
	and breaking that assumption broke the content.)</p>
   <p class="note" role="note"><span>Note:</span> Units are <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive③">ASCII case-insensitive</a> and serialize as lower case, for example 1Q serializes as 1q.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="reference-pixel">reference pixel</dfn> is the visual angle of one pixel on a device with a pixel density of 96dpi
	and a distance from the reader of an arm’s length.
	For a nominal arm’s length of 28 inches,
	the visual angle is therefore about 0.0213 degrees.
	For reading at arm’s length,
	1px thus corresponds to about 0.26 mm (1/96 inch).</p>
   <p>The image below illustrates the effect of viewing distance on the size of a reference pixel:
	a reading distance of 71 cm (28 inches)
	results in a reference pixel of 0.26 mm,
	while a reading distance of 3.5 m (12 feet)
	results in a reference pixel of 1.3 mm.</p>
   <figure>
     <img alt="This diagram illustrates how the definition of a pixel
		             depends on the users distance from the viewing surface
		             (paper or screen).
		             The image depicts the user looking at two planes, one
		             28 inches (71 cm) from the user, the second 140 inches
		             (3.5 m) from the user. An expanding cone is projected
		             from the user’s eye onto each plane. Where the cone
		             strikes the first plane, the projected pixel is 0.26 mm
		             high. Where the cone strikes the second plane, the
		             projected pixel is 1.4 mm high." src="images/pixel1.png"> 
    <figcaption>Showing that pixels must become larger if the viewing distance increases</figcaption>
   </figure>
   <p>This second image illustrates the effect of a device’s resolution
	on the pixel unit: an area of 1px by 1px is covered by a single dot
	in a low-resolution device (e.g. a typical computer display), while
	the same area is covered by 16 dots in a higher resolution device
	(such as a printer).</p>
   <figure>
     <img alt="This diagram illustrates the relationship between the
		             reference pixel and device pixels (called &quot;dots&quot; below).
		             The image depicts a high resolution (large dot density)
		             laser printer output on the left and a low resolution
		             monitor screen on the right. For the laser printer, one
		             square reference pixel is implemented by 16 dots. For
		             the monitor screen, one square reference pixel is
		             implemented by a single dot." src="images/pixel2.png"> 
    <figcaption>Showing that more device pixels (dots) are needed to cover a 1px by 1px area
		on a high-resolution device than on a lower-resolution one
		(of the same approximate viewing distance)</figcaption>
   </figure>
   <h2 class="heading settled" data-level="7" id="other-units"><span class="secno">7. </span><span class="content"> Other Quantities</span><a class="self-link" href="#other-units"></a></h2>
   <h3 class="heading settled" data-level="7.1" id="angles"><span class="secno">7.1. </span><span class="content"> Angle Units: the <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value④" title="Expands to: turn | rad | grad | deg">&lt;angle></a> type and <a class="css" data-link-type="maybe" href="#deg" id="ref-for-deg">deg</a>, <a class="css" data-link-type="maybe" href="#grad" id="ref-for-grad">grad</a>, <a class="css" data-link-type="maybe" href="#rad" id="ref-for-rad">rad</a>, <a class="css" data-link-type="maybe" href="#turn" id="ref-for-turn">turn</a> units</span><a class="self-link" href="#angles"></a></h3>
   <p>Angle values are <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension①">&lt;dimension></a>s denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="angle-value">&lt;angle></dfn>.
	The angle unit identifiers are:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<angle>" data-dfn-type="value" data-export id="deg">deg</dfn> 
    <dd> Degrees. There are 360 degrees in a full circle. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<angle>" data-dfn-type="value" data-export id="grad">grad</dfn> 
    <dd> Gradians, also known as "gons" or "grades".
			There are 400 gradians in a full circle. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<angle>" data-dfn-type="value" data-export id="rad">rad</dfn> 
    <dd> Radians. There are 2π radians in a full circle. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<angle>" data-dfn-type="value" data-export id="turn">turn</dfn> 
    <dd> Turns. There is 1 turn in a full circle. 
   </dl>
   <p>For example, a right angle is <span class="css">90deg</span> or <span class="css">100grad</span> or <span class="css">0.25turn</span> or
	approximately <span class="css">1.57rad</span>.</p>
   <p>All <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value⑤" title="Expands to: turn | rad | grad | deg">&lt;angle></a> units are <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units⑥">compatible</a>,
	and <a class="css" data-link-type="maybe" href="#deg" id="ref-for-deg①">deg</a> is their <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit③">canonical unit</a>.</p>
   <div class="note" role="note">
     By convention,
		when an angle denotes a direction in CSS,
		it is typically interpreted as a <dfn data-dfn-type="dfn" data-export id="bearing-angle">bearing angle<a class="self-link" href="#bearing-angle"></a></dfn>,
		where 0deg is "up" or "north" on the screen,
		and larger angles are more clockwise
		(so 90deg is "right" or "east"). 
    <p>For example, in the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-images-3/#funcdef-linear-gradient" id="ref-for-funcdef-linear-gradient">linear-gradient()</a> function,
		the <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value⑥" title="Expands to: turn | rad | grad | deg">&lt;angle></a> that determines the direction of the gradient
		is interpreted as a bearing angle.</p>
   </div>
   <p class="note" role="note"><span>Note:</span> For legacy reasons,
	some uses of <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value⑦" title="Expands to: turn | rad | grad | deg">&lt;angle></a> allow a bare <span class="css">0</span> to mean <span class="css">0deg</span>.
	This is not true in general, however,
	and will not occur in future uses of the <span class="production" id="ref-for-angle-value⑧" title="Expands to: turn | rad | grad | deg">&lt;angle></span> type.</p>
   <h3 class="heading settled" data-level="7.2" id="time"><span class="secno">7.2. </span><span class="content"> Duration Units: the <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value⑤" title="Expands to: s | ms">&lt;time></a> type and <a class="css" data-link-type="maybe" href="#s" id="ref-for-s">s</a>, <a class="css" data-link-type="maybe" href="#ms" id="ref-for-ms">ms</a> units</span><a class="self-link" href="#time"></a></h3>
   <p>Time values are <a data-link-type="dfn" href="#dimension" id="ref-for-dimension⑨">dimensions</a> denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="time-value">&lt;time></dfn>.
	The time unit identifiers are:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<time>" data-dfn-type="value" data-export id="s">s</dfn> 
    <dd>Seconds. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<time>" data-dfn-type="value" data-export id="ms">ms</dfn> 
    <dd>Milliseconds. There are 1000 milliseconds in a second. 
   </dl>
   <p>All <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value⑥" title="Expands to: s | ms">&lt;time></a> units are <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units⑦">compatible</a>,
	and <a class="css" data-link-type="maybe" href="#s" id="ref-for-s①">s</a> is their <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit④">canonical unit</a>.</p>
   <p>Properties may restrict the time value to some range.
	If the value is outside the allowed range,
	the declaration is invalid and must be <a href="https://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.</p>
   <h3 class="heading settled" data-level="7.3" id="frequency"><span class="secno">7.3. </span><span class="content"> Frequency Units: the <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value⑤" title="Expands to: hz | khz">&lt;frequency></a> type and <a class="css" data-link-type="maybe" href="#Hz" id="ref-for-Hz">Hz</a>, <a class="css" data-link-type="maybe" href="#kHz" id="ref-for-kHz">kHz</a> units</span><a class="self-link" href="#frequency"></a></h3>
   <p>Frequency values are <a data-link-type="dfn" href="#dimension" id="ref-for-dimension①⓪">dimensions</a> denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="frequency-value">&lt;frequency></dfn>.
	The frequency unit identifiers are:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<frequency>" data-dfn-type="value" data-export id="Hz">Hz</dfn> 
    <dd>Hertz. It represents the number of occurrences per second. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<frequency>" data-dfn-type="value" data-export id="kHz">kHz</dfn> 
    <dd>KiloHertz. A kiloHertz is 1000 Hertz. 
   </dl>
   <p>For example, when representing sound pitches, 200Hz (or 200hz)
	is a bass sound, and 6kHz (or 6khz) is a treble sound.</p>
   <p>All <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value⑥" title="Expands to: hz | khz">&lt;frequency></a> units are <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units⑧">compatible</a>,
	and <a class="css" data-link-type="maybe" href="#Hz" id="ref-for-Hz①">hz</a> is their <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit⑤">canonical unit</a>.</p>
   <p class="note" role="note"><span>Note:</span> Units are <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive④">ASCII case-insensitive</a> and serialize as lower case, for example 1Hz serializes as 1hz.</p>
   <h3 class="heading settled" data-level="7.4" id="resolution"><span class="secno">7.4. </span><span class="content"> Resolution Units: the <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value②" title="Expands to: dppx | x | dpcm | dpi">&lt;resolution></a> type and <a class="css" data-link-type="maybe" href="#dpi" id="ref-for-dpi">dpi</a>, <a class="css" data-link-type="maybe" href="#dpcm" id="ref-for-dpcm">dpcm</a>, <a class="css" data-link-type="maybe" href="#dppx" id="ref-for-dppx">dppx</a> units</span><a class="self-link" href="#resolution"></a></h3>
   <p>Resolution units are <a data-link-type="dfn" href="#dimension" id="ref-for-dimension①①">dimensions</a> denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="resolution-value">&lt;resolution></dfn>.
	The resolution unit identifiers are:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<resolution>" data-dfn-type="value" data-export id="dpi">dpi</dfn> 
    <dd>Dots per inch. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<resolution>" data-dfn-type="value" data-export id="dpcm">dpcm</dfn> 
    <dd>Dots per centimeter. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<resolution>" data-dfn-type="value" data-export id="dppx">dppx</dfn> 
    <dt><dfn class="css" data-dfn-for="<resolution>" data-dfn-type="value" data-export id="x">x<a class="self-link" href="#x"></a></dfn> 
    <dd>Dots per <a class="css" data-link-type="maybe" href="#px" id="ref-for-px⑤">px</a> unit. 
   </dl>
   <p>The <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value③" title="Expands to: dppx | x | dpcm | dpi">&lt;resolution></a> unit represents the size of a single "dot" in a graphical representation
	by indicating how many of these dots fit in a CSS <a class="css" data-link-type="maybe" href="#in" id="ref-for-in③">in</a>, <a class="css" data-link-type="maybe" href="#cm" id="ref-for-cm②">cm</a>, or <a class="css" data-link-type="maybe" href="#px" id="ref-for-px⑥">px</a>.
	For uses, see e.g. the <span class="css">resolution</span> media query in <a data-link-type="biblio" href="#biblio-mediaq">[MEDIAQ]</a> or the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution" id="ref-for-propdef-image-resolution">image-resolution</a> property defined in <a data-link-type="biblio" href="#biblio-css3-images">[CSS3-IMAGES]</a>.</p>
   <p>All <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value④" title="Expands to: dppx | x | dpcm | dpi">&lt;resolution></a> units are <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units⑨">compatible</a>,
	and <a class="css" data-link-type="maybe" href="#dppx" id="ref-for-dppx①">dppx</a> is their <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit⑥">canonical unit</a>.</p>
   <p class="note" role="note">Note that due to the 1:96 fixed ratio of CSS <a class="css" data-link-type="maybe" href="#in" id="ref-for-in④">in</a> to CSS <a class="css" data-link-type="maybe" href="#px" id="ref-for-px⑦">px</a>, <span class="css">1dppx</span> is equivalent to <span class="css">96dpi</span>.
	This corresponds to the default resolution of images displayed in CSS:
	see <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution" id="ref-for-propdef-image-resolution①">image-resolution</a>. </p>
   <div class="example" id="example-33e77fee">
    <a class="self-link" href="#example-33e77fee"></a> The following @media rule uses Media Queries <a data-link-type="biblio" href="#biblio-mediaq">[MEDIAQ]</a> to assign some special style rules to devices that use two or more device pixels per CSS <a class="css" data-link-type="maybe" href="#px" id="ref-for-px⑧">px</a> unit: 
<pre>@media (min-resolution: 2dppx) { ... }</pre>
   </div>
   <h2 class="heading settled" data-level="8" id="defined-elsewhere"><span class="secno">8. </span><span class="content"> Data Types Defined Elsewhere</span><a class="self-link" href="#defined-elsewhere"></a></h2>
   <p>Some data types are defined in their own modules.
	This example talks about some of the most common ones
	used across several specifications.</p>
   <h3 class="heading settled" data-level="8.1" id="colors"><span class="secno">8.1. </span><span class="content"> Colors: the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> type</span><a class="self-link" href="#colors"></a></h3>
   <p>The <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color①" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> data type is defined in <a data-link-type="biblio" href="#biblio-css3color">[CSS3COLOR]</a>.
	UAs that support CSS Color Level 3 or its successor must interpret <span class="production" id="ref-for-valuea-def-color②" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></span> as defined therein.</p>
   <h4 class="heading settled" data-level="8.1.1" id="combine-colors"><span class="secno">8.1.1. </span><span class="content"> Combination of <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color③" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a></span><a class="self-link" href="#combine-colors"></a></h4>
   <p><a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation①②">Interpolation</a> of <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color④" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> is defined as
	the independent interpolation of each component
	(red, green, blue, alpha)
	as a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①②">&lt;number></a>.
	Interpolation is done between premultiplied colors
	(that is, colors for which the red, green, and blue components specified
	have been multiplied by the alpha).</p>
   <p><a data-link-type="dfn" href="#addition" id="ref-for-addition①③">Addition</a> of <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①③">&lt;number></a> is likewise defined as
	the independent <span id="ref-for-addition①④">addition</span> of each component
	as a <span class="production" id="ref-for-number-value①④">&lt;number></span> in premultiplied space.</p>
   <p class="issue" id="issue-7fabb422"><a class="self-link" href="#issue-7fabb422"></a> Computed value needs to be able to represent
	combinations of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor">currentColor</a> and an actual color.
	Consider the value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color">text-emphasis-color</a> in <code>div { text-emphasis: circle; transition: all 2s; }<br> div:hover { text-emphasis-color: lime; }<br> em { color: red; }</code> See <a href="https://github.com/w3c/csswg-drafts/issues/445">Issue 445</a>.</p>
   <h3 class="heading settled" data-level="8.2" id="images"><span class="secno">8.2. </span><span class="content"> Images: the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image">&lt;image></a> type</span><a class="self-link" href="#images"></a></h3>
   <p>The <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image①">&lt;image></a> data type is defined in <a data-link-type="biblio" href="#biblio-css3-images">[CSS3-IMAGES]</a>.
	UAs that support CSS Images Level 3 or its successor
	must interpret <span class="production" id="ref-for-typedef-image②">&lt;image></span> as defined therein.
	UAs that do not yet support CSS Images Level 3
	must interpret <span class="production" id="ref-for-typedef-image③">&lt;image></span> as <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value⑧">&lt;url></a>.</p>
   <h4 class="heading settled" data-level="8.2.1" id="combine-images"><span class="secno">8.2.1. </span><span class="content"> Combination of <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image④">&lt;image></a></span><a class="self-link" href="#combine-images"></a></h4>
   <p class="note" role="note"><span>Note:</span> Interpolation of <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image⑤">&lt;image></a> is defined in <a href="https://drafts.csswg.org/css-images-3/#interpolation">CSS Images 3 §6 Interpolation</a>.</p>
   <p>Images are <a data-link-type="dfn" href="#not-additive" id="ref-for-not-additive①">not additive</a>.</p>
   <h3 class="heading settled" data-level="8.3" id="position"><span class="secno">8.3. </span><span class="content"> 2D Positioning: the <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position">&lt;position></a> type</span><a class="self-link" href="#position"></a></h3>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-position"><a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position①">&lt;position></a></dfn> value specifies the position of a object area (e.g. background image)
	inside a positioning area (e.g. background positioning area).
	It is interpreted as specified for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position">background-position</a>. <a data-link-type="biblio" href="#biblio-css3-background">[CSS3-BACKGROUND]</a></p>
<pre class="prod"><a class="production" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position②">&lt;position></a> = [
  [ left <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one④">|</a> center <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one⑤">|</a> right ] <a data-link-type="grammar" href="#comb-any" id="ref-for-comb-any">||</a> [ top <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one⑥">|</a> center <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one⑦">|</a> bottom ]
<a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one⑧">|</a>
  [ left <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one⑨">|</a> center <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①⓪">|</a> right <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①①">|</a> <a class="production" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage①">&lt;length-percentage></a> ]
  [ top <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①②">|</a> center <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①③">|</a> bottom <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①④">|</a> <a class="production" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage②">&lt;length-percentage></a> ]<a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt③">?</a>
<a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①⑤">|</a>
  [ [ left <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①⑥">|</a> right ] <a class="production" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage③">&lt;length-percentage></a> ] <a data-link-type="grammar" href="#comb-all" id="ref-for-comb-all">&amp;&amp;</a>
  [ [ top <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①⑦">|</a> bottom ] <a class="production" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage④">&lt;length-percentage></a> ]
]
</pre>
   <p class="note" role="note"><span>Note:</span> The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position①">background-position</a> property also accepts a three-value syntax.
	This has been disallowed generically because it creates parsing ambiguities
	when combined with other length or percentage components in a property value.</p>
   <p>The canonical order when serializing is
	the horizontal component followed by the vertical component.</p>
   <p>When specified in a grammar alongside other keywords, <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①④" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>s, or <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②③">&lt;percentage></a>s, <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position③">&lt;position></a> is <em>greedily</em> parsed;
	it consumes as many components as possible.</p>
   <div class="example" id="example-aa45b932"><a class="self-link" href="#example-aa45b932"></a> For example, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-origin" id="ref-for-propdef-transform-origin">transform-origin</a> defines a 3D position
		as (effectively) ''<a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position④">&lt;position></a> <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①⑤" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>?''.
		A value such as <span class="css">left 50px</span> will be parsed as a 2-value <span class="production" id="ref-for-typedef-position⑤">&lt;position></span>,
		with an omitted z-component;
		on the other hand,
		a value such as <span class="css">top 50px</span> will be parsed as a single-value <span class="production" id="ref-for-typedef-position⑥">&lt;position></span> followed by a <span class="production" id="ref-for-length-value①⑥" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></span>. </div>
   <h4 class="heading settled" data-level="8.3.1" id="combine-positions"><span class="secno">8.3.1. </span><span class="content"> Combination of <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position⑦">&lt;position></a></span><a class="self-link" href="#combine-positions"></a></h4>
   <p><a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation①③">Interpolation</a> of <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position⑧">&lt;position></a> is defined as
	the independent interpolation of each component (x, y)
	normalized as an offset from the top left corner
	as a <a class="production css" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage⑤">&lt;length-percentage></a>.</p>
   <p><a data-link-type="dfn" href="#addition" id="ref-for-addition①⑤">Addition</a> of <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position⑨">&lt;position></a> is likewise defined as
	the independent <span id="ref-for-addition①⑥">addition</span> each component (x, y)
	normalized as an offset from the top left corner
	as a <a class="production css" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage⑥">&lt;length-percentage></a>.</p>
   <h2 class="heading settled" data-level="9" id="functional-notations"><span class="secno">9. </span><span class="content"> Functional Notations</span><a class="self-link" href="#functional-notations"></a></h2>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="functional-notation">functional notation</dfn> is a type of component value
	that can represent more complex types or invoke special processing.
	The syntax starts with the name of the function
	immediately followed by a left parenthesis
	(i.e. a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-function-token" id="ref-for-typedef-function-token">&lt;function-token></a>)
	followed by the argument(s) to the notation
	followed by a right parenthesis. <a href="https://www.w3.org/TR/css-syntax/#whitespace">White space</a> is allowed, but optional,
	immediately inside the parentheses.
	Functions can take multiple arguments,
	which are formatted similarly to a CSS property value.</p>
   <p>Some legacy <a data-link-type="dfn" href="#functional-notation" id="ref-for-functional-notation②">functional notations</a>, such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#funcdef-rgba" id="ref-for-funcdef-rgba">rgba()</a>, use commas unnecessarily,
	but generally commas are only used to separate items in a list,
	or pieces of a grammar that would be ambiguous otherwise.
	If a comma is used to separate arguments, <a href="https://www.w3.org/TR/css-syntax/#whitespace">white space</a> is optional before and after the comma.</p>
   <div class="example" id="example-3fbb1c9d">
    <a class="self-link" href="#example-3fbb1c9d"></a> 
<pre>background: url(http://www.example.org/image);
color: rgb(100, 200, 50 );
content: counter(list-item) ". ";
width: calc(50% - 2em);
</pre>
   </div>
   <p>The <a data-link-type="dfn" href="#math-function" id="ref-for-math-function">math functions</a> are defined in <a href="#math">§ 11 Mathematical Expressions</a>.</p>
   <h3 class="heading settled" data-level="9.1" id="toggle-notation"><span class="secno">9.1. </span><span class="content"> Toggling Between Values: <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle①">toggle()</a></span><a class="self-link" href="#toggle-notation"></a></h3>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-toggle">toggle()</dfn> expression allows descendant elements
	to cycle over a list of values instead of inheriting the same value.</p>
   <div class="example" id="example-43c760b5">
    <a class="self-link" href="#example-43c760b5"></a> The following example makes <code>&lt;em></code> elements italic in general,
		but makes them normal if they’re inside something that’s italic: 
<pre>em { font-style: toggle(italic, normal); }</pre>
   </div>
   <div class="example" id="example-fa2213e4">
    <a class="self-link" href="#example-fa2213e4"></a> The following example cycles markers for nested lists,
		so that a top level list has <span class="css">disc</span>-shaped markers,
		but nested lists use <span class="css">circle</span>, then <span class="css">square</span>, then <span class="css">box</span>,
		and then repeat through the list of marker shapes,
		starting again (for the 5th list deep) with <span class="css">disc</span>. 
<pre>ul { list-style-type: toggle(disc, circle, square, box); }</pre>
   </div>
   <p>The syntax of the <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle②">toggle()</a> expression is:</p>
<pre>toggle( <a class="production" data-link-type="type" href="#typedef-toggle-value" id="ref-for-typedef-toggle-value">&lt;toggle-value></a># )</pre>
   <p>where <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-toggle-value">&lt;toggle-value></dfn> is any CSS value
	that is valid where the expression is placed,
	and that doesn’t contain any top-level commas.
	If any of the values inside are not valid,
	then the entire <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle③">toggle()</a> expression is invalid.
	The <span class="css" id="ref-for-funcdef-toggle④">toggle()</span> expression may be used as the value of any property,
	but must be the only component in that property’s value.</p>
   <p>The <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle⑤">toggle()</a> notation is not allowed to be nested; nor may it
	contain <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①">attr()</a> or <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc④">calc()</a> notations.
	Declarations containing such constructs are invalid.</p>
   <div class="example" id="example-967482c4">
    <a class="self-link" href="#example-967482c4"></a> The following <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle⑥">toggle()</a> examples are all invalid: 
<pre>background-position: 10px toggle(50px, 100px);
/* toggle() must be the sole value of the property */

list-style-type: toggle(disc, 50px);
/* <span class="css">50px</span> isn’t a valid value of 'list-style-type' */
</pre>
   </div>
   <p>To determine the computed value of <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle⑦">toggle()</a>,
	first evaluate each argument as if it were the sole value of the property in which <span class="css" id="ref-for-funcdef-toggle⑧">toggle()</span> is placed
	to determine the computed value that each represents,
	called <var>C<sub>n</sub></var> for the <var>n</var>-th argument to <span class="css" id="ref-for-funcdef-toggle⑨">toggle()</span>.
	Then, compare the property’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#inherited-value" id="ref-for-inherited-value">inherited value</a> with each <var>C<sub>n</sub></var>.
	For the earliest <var>C<sub>n</sub></var> that matches the <span id="ref-for-inherited-value①">inherited value</span>,
	the computed value of <span class="css" id="ref-for-funcdef-toggle①⓪">toggle()</span> is <var>C<sub>n+1</sub></var>.
	If the match was the last argument in the list,
	or there was no match,
	the computed value of <span class="css" id="ref-for-funcdef-toggle①①">toggle()</span> is the computed value that the first argument represents.</p>
   <p class="note" role="note"><span>Note:</span> This means that repeating values in a <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle①②">toggle()</a> short-circuits the list.
	For example <span class="css">toggle(1em, 2em, 1em, 4em)</span> will be equivalent to <span class="css">toggle(1em, 2em)</span>.</p>
   <p class="note" role="note"><span>Note:</span> That <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle①③">toggle()</a> explicitly looks at the computed value of the parent,
	so it works even on non-inherited properties.
	This is similar to the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit" id="ref-for-valdef-all-inherit④">inherit</a> keyword,
	which works even on non-inherited properties.</p>
   <p class="note" role="note"><span>Note:</span> That the <a href="https://www.w3.org/TR/CSS21/cascade.html#computed-value">computed value</a> of a property is an abstract set of values,
	not a particular serialization <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>,
	so comparison between computed values should always be unambiguous and have the expected result.
	For example,
	a Level 2 <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/colors.html#propdef-background-position" id="ref-for-propdef-background-position②">background-position</a> computed value
	is just two offsets, each represented as an absolute length or a percentage,
	so the declarations <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position③">background-position: top center</a> and <span class="css" id="ref-for-propdef-background-position④">background-position: 50% 0%</span> produce identical computed values.
	If the "Computed Value" line of a property definition seems to define something ambiguous or overly strict,
	please <a href="#status">provide feedback</a> so we can fix it.</p>
   <p>If <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle①④">toggle()</a> is used on a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property">shorthand property</a>,
	it sets each of its longhands to a <span class="css" id="ref-for-funcdef-toggle①⑤">toggle()</span> value
	with arguments corresponding to what the longhand would have received
	had each of the original <span class="css" id="ref-for-funcdef-toggle①⑥">toggle()</span> arguments been the sole value of the <span id="ref-for-shorthand-property①">shorthand</span>.</p>
   <div class="example" id="example-4bc8989d">
    <a class="self-link" href="#example-4bc8989d"></a> For example, the following shorthand declaration: 
<pre>margin: toggle(1px 2px, 4px, 1px 5px 4px);</pre>
    <p>is equivalent to the following longhand declarations:</p>
<pre>margin-top:    toggle(1px, 4px, 1px);
margin-right:  toggle(2px, 4px, 5px);
margin-bottom: toggle(1px, 4px, 4px);
margin-left:   toggle(2px, 4px, 5px);
</pre>
    <p>Note that, since <span class="css">1px</span> appears twice in the top margin and <span class="css">4px</span> appears twice in bottom margin,
		they will cycle between only two values
		while the left and right margins cycle through three.
		In other words, the declarations above will yield the same computed values
		as the longhand declarations below:</p>
<pre>margin-top:    toggle(1px, 4px);
margin-right:  toggle(2px, 4px, 5px);
margin-bottom: toggle(1px, 4px);
margin-left:   toggle(2px, 4px, 5px);
</pre>
    <p>which may not be what was intended.</p>
   </div>
   <h2 class="heading settled" data-level="10" id="attr-notation"><span class="secno">10. </span><span class="content"> Attribute References: the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②">attr()</a> function</span><a class="self-link" href="#attr-notation"></a></h2>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-attr">attr()</dfn> function substitutes the value of an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute" id="ref-for-concept-attribute">attribute</a> on an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element" id="ref-for-concept-element">element</a> into a property,
	similar to how the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-variables-1/#funcdef-var" id="ref-for-funcdef-var">var()</a> function
	substitutes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property">custom property</a> value into a function.</p>
<pre class="prod">attr() = attr( <a class="production" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-wq-name" id="ref-for-typedef-wq-name">&lt;wq-name></a> <a class="production" data-link-type="type" href="#typedef-attr-type" id="ref-for-typedef-attr-type">&lt;attr-type></a><a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt④">?</a> <a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma②">,</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value">&lt;declaration-value></a><a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt⑤">?</a>)

<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-attr-type">&lt;attr-type></dfn> = string <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①⑧">|</a> url <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①⑨">|</a> ident <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②⓪">|</a> color <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②①">|</a> number <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②②">|</a> percentage <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②③">|</a>
              length <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②④">|</a> angle <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②⑤">|</a> time <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②⑥">|</a> frequency <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②⑦">|</a> flex <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②⑧">|</a> <a class="production" data-link-type="type" href="#typedef-dimension-unit" id="ref-for-typedef-dimension-unit">&lt;dimension-unit></a>
</pre>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-dimension-unit">&lt;dimension-unit></dfn> production matches a literal "%" character
	(that is, a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-delim-token" id="ref-for-typedef-delim-token">&lt;delim-token></a> with a value of "%")
	or an ident whose value is any of the CSS units
	for <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①⑦" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>, <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value⑨" title="Expands to: turn | rad | grad | deg">&lt;angle></a>, <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value⑦" title="Expands to: s | ms">&lt;time></a>, <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value⑦" title="Expands to: hz | khz">&lt;frequency></a>, or <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-grid-1/#typedef-flex" id="ref-for-typedef-flex" title="Expands to: fr">&lt;flex></a> values
	(such as <a class="css" data-link-type="maybe" href="#px" id="ref-for-px⑨">px</a> or <a class="css" data-link-type="maybe" href="#ms" id="ref-for-ms①">ms</a>).</p>
   <p>The arguments of <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr③">attr()</a> are:</p>
   <dl>
    <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-wq-name" id="ref-for-typedef-wq-name①">&lt;wq-name></a>
    <dd data-md>
     <p>Gives the name of the attribute being referenced.</p>
     <p>If no namespace is specified
(just an identifier is given, like <span class="css">attr(foo)</span>),
the null namespace is implied.
(This is usually what’s desired,
as namespaced attributes are rare.
In particular, HTML and SVG do not contain namespaced attributes.)
As with <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#attribute-selector" id="ref-for-attribute-selector">attribute selectors</a>,
the case-sensitivity of <a class="production css" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-wq-name" id="ref-for-typedef-wq-name②">&lt;wq-name></a> depends on the document language.</p>
     <p>If <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr④">attr()</a> is used in a property applied to an element,
it references the attribute of the given name on that element;
if applied to a pseudo-element,
the attribute is looked up on the pseudo-element’s <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element">originating element</a>.</p>
    <dt data-md><a class="production css" data-link-type="type" href="#typedef-attr-type" id="ref-for-typedef-attr-type①">&lt;attr-type></a>
    <dd data-md>
     <p>Specifies what kind of CSS value
the attribute’s value will be interpreted into
(the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr⑤">attr()</a>’s <dfn class="dfn-paneled" data-dfn-for="attr()" data-dfn-type="dfn" data-noexport id="attr-substitution-value">substitution value</dfn>)
and what, if any, special parsing will be done to the value.</p>
     <p>The possible values and their behavior are defined in <a href="#attr-types">§ 10.1 attr() Types</a>.</p>
     <p>Defaults to <a class="css" data-link-type="maybe" href="#valdef-attr-string" id="ref-for-valdef-attr-string">string</a> if omitted.</p>
    <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value①">&lt;declaration-value></a>
    <dd data-md>
     <p>Specifies a fallback value for the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr⑥">attr()</a>,
which will be substituted instead of the attribute’s value
if the attribute is missing
or fails to parse as the specified type.</p>
     <p>If the <a class="production css" data-link-type="type" href="#typedef-attr-type" id="ref-for-typedef-attr-type②">&lt;attr-type></a> argument is <a class="css" data-link-type="maybe" href="#valdef-attr-string" id="ref-for-valdef-attr-string①">string</a>,
defaults to the empty string if omitted;
otherwise, defaults to the <a data-link-type="dfn">guaranteed-invalid value</a> if omitted.</p>
   </dl>
   <p>If a property contains one or more <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr⑦">attr()</a> functions,
	and those functions are syntactically valid,
	the entire property’s grammar must be assumed to be valid at parse time.
	It is only syntax-checked at computed-value time,
	after <span class="css" id="ref-for-funcdef-attr⑧">attr()</span> functions have been <a data-link-type="dfn" href="#substitute-an-attr" id="ref-for-substitute-an-attr">substituted</a>.</p>
   <div class="note" role="note"> Note that the default value need not be of the type given.
		For instance, if the type required of the attribute by the author is <a class="css" data-link-type="maybe" href="#px" id="ref-for-px①⓪">px</a>,
		the default could still be <span class="css">auto</span>,
		like in <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width⑦">width: attr(size px, auto);</a>. </div>
   <h3 class="heading settled" data-level="10.1" id="attr-types"><span class="secno">10.1. </span><span class="content"> <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr⑨">attr()</a> Types</span><a class="self-link" href="#attr-types"></a></h3>
   <p>The behavior of the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①⓪">attr()</a> function
	depends partially on the value of the <a class="production css" data-link-type="type" href="#typedef-attr-type" id="ref-for-typedef-attr-type③">&lt;attr-type></a> argument:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="attr()" data-dfn-type="value" data-export id="valdef-attr-string">string</dfn>
    <dd data-md>
     <p>The <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value">substitution value</a> is a CSS string,
whose value is the literal value of the attribute.
(No CSS parsing or "cleanup" of the value is performed.)</p>
     <p>No value triggers fallback.</p>
    <dt data-md><dfn class="css" data-dfn-for="attr()" data-dfn-type="value" data-export id="valdef-attr-url">url<a class="self-link" href="#valdef-attr-url"></a></dfn>
    <dd data-md>
     <p>The <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value①">substitution value</a> is a CSS <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value⑨">&lt;url></a> value,
whose url is the literal value of the attribute.
(No CSS parsing or "cleanup" of the value is performed.)</p>
     <p class="note" role="note"><span>Note:</span> If <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url①③">url()</a> was syntactically capable of containing functions, <span class="css">attr(foo url)</span> would be identical to <span class="css">url(attr(foo string))</span>.</p>
     <p>No value triggers fallback.</p>
    <dt data-md><dfn class="css" data-dfn-for="attr()" data-dfn-type="value" data-export id="valdef-attr-ident">ident<a class="self-link" href="#valdef-attr-ident"></a></dfn>
    <dd data-md>
     <p>The <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value②">substitution value</a> is a CSS <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value①③">&lt;custom-ident></a>,
whose value is the literal value of the attribute,
with <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace" id="ref-for-strip-leading-and-trailing-ascii-whitespace">leading and trailing ASCII whitespace stripped</a>.
(No CSS parsing of the value is performed.)</p>
     <p>If the attribute value,
after trimming,
is the empty string,
there is instead no <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value③">substitution value</a>.</p>
     <p>If the <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value①④">&lt;custom-ident></a>’s value is a <a data-link-type="dfn" href="#css-wide-keywords" id="ref-for-css-wide-keywords①">CSS-wide keyword</a> or <span class="css">default</span>,
there is instead no <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value④">substitution value</a>.</p>
    <dt data-md><dfn class="css" data-dfn-for="attr()" data-dfn-type="value" data-export id="valdef-attr-color">color<a class="self-link" href="#valdef-attr-color"></a></dfn>
    <dd data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#parse-a-component-value" id="ref-for-parse-a-component-value">Parse a component value</a> from the attribute’s value.
If the result is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-4/#typedef-hex-color" id="ref-for-typedef-hex-color">&lt;hex-color></a> or a <a data-link-type="dfn" href="https://drafts.csswg.org/css-color-4/#named-color" id="ref-for-named-color">named color</a> ident,
the <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value⑤">substitution value</a> is that result as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color⑤" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a>.</p>
     <p>Otherwise there is no <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value⑥">substitution value</a>.</p>
    <dt data-md><dfn class="css" data-dfn-for="attr()" data-dfn-type="value" data-export id="valdef-attr-number">number<a class="self-link" href="#valdef-attr-number"></a></dfn>
    <dd data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#parse-a-component-value" id="ref-for-parse-a-component-value①">Parse a component value</a> from the attribute’s value.
If the result is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token③">&lt;number-token></a>,
the result is the <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value⑦">substitution value</a>.</p>
     <p>Otherwise, there is no <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value⑧">substitution value</a>.</p>
    <dt data-md><dfn class="css" data-dfn-for="attr()" data-dfn-type="value" data-export id="valdef-attr-percentage">percentage<a class="self-link" href="#valdef-attr-percentage"></a></dfn>
    <dd data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#parse-a-component-value" id="ref-for-parse-a-component-value②">Parse a component value</a> from the attribute’s value.
If the result is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-percentage-token" id="ref-for-typedef-percentage-token①">&lt;percentage-token></a>,
the result is the <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value⑨">substitution value</a>.</p>
     <p>Otherwise, there is no <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value①⓪">substitution value</a>.</p>
    <dt data-md><dfn class="css" data-dfn-for="attr()" data-dfn-type="value" data-export id="valdef-attr-length">length<a class="self-link" href="#valdef-attr-length"></a></dfn>
    <dt data-md><dfn class="css" data-dfn-for="attr()" data-dfn-type="value" data-export id="valdef-attr-angle">angle<a class="self-link" href="#valdef-attr-angle"></a></dfn>
    <dt data-md><dfn class="css" data-dfn-for="attr()" data-dfn-type="value" data-export id="valdef-attr-time">time<a class="self-link" href="#valdef-attr-time"></a></dfn>
    <dt data-md><dfn class="css" data-dfn-for="attr()" data-dfn-type="value" data-export id="valdef-attr-frequency">frequency<a class="self-link" href="#valdef-attr-frequency"></a></dfn>
    <dt data-md><dfn class="css" data-dfn-for="attr()" data-dfn-type="value" data-export id="valdef-attr-flex">flex<a class="self-link" href="#valdef-attr-flex"></a></dfn>
    <dd data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#parse-a-component-value" id="ref-for-parse-a-component-value③">Parse a component value</a> from the attribute’s value.
If the result is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token" id="ref-for-typedef-dimension-token②">&lt;dimension-token></a> whose unit matches the given type,
the result is the <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value①①">substitution value</a>.</p>
     <p>Otherwise, there is no <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value①②">substitution value</a>.</p>
    <dt data-md><dfn class="css" data-dfn-for="attr()" data-dfn-type="value" data-export id="valdef-attr-dimension-unit"><a class="production css" data-link-type="type" href="#typedef-dimension-unit" id="ref-for-typedef-dimension-unit①">&lt;dimension-unit></a><a class="self-link" href="#valdef-attr-dimension-unit"></a></dfn>
    <dd data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#parse-a-component-value" id="ref-for-parse-a-component-value④">Parse a component value</a> from the attribute’s value.
If the result is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token④">&lt;number-token></a>,
the <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value①③">substitution value</a> is a dimension
with the result’s value,
and the given unit.</p>
     <p>Otherwise, there is no <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value①④">substitution value</a>.</p>
   </dl>
   <p class="issue" id="issue-168aea69"><a class="self-link" href="#issue-168aea69"></a> Do we want to allow <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①">math functions</a> as attr values
	for all the numeric types?
	And color functions for "color"?
	I think we do,
	but I’d have to check the contents to make sure they don’t contain further reference functions; <code class="highlight">foo="rgb(var(--red), 0, 0)"</code> needs to be illegal for <span class="css">attr(foo color)</span>.</p>
   <div class="example" id="example-eeda89e8">
    <a class="self-link" href="#example-eeda89e8"></a> This example shows the use of attr() to visually illustrate data
		in an XML file: 
<pre>&lt;stock>
  &lt;wood length="12"/>
  &lt;wood length="5"/>
  &lt;metal length="19"/>
  &lt;wood length="4"/>
&lt;/stock>

stock::before {
  display: block;
  content: "To scale, the lengths of materials in stock are:";
}
stock > * {
  display: block;
  width: attr(length em, 0px);
  height: 1em;
  border: solid thin;
  margin: 0.5em;
}
wood {
  background: orange url(wood.png);
}
metal {
  background: silver url(metal.png);
}
</pre>
   </div>
   <h3 class="heading settled" data-level="10.2" id="attr-substitution"><span class="secno">10.2. </span><span class="content"> <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①①">attr()</a> Substitution</span><a class="self-link" href="#attr-substitution"></a></h3>
   <p class="issue" id="issue-9dd81cfe"><a class="self-link" href="#issue-9dd81cfe"></a> attr() and var() substitute at the same time,
	so I should probably rewrite <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#substitute-a-var" id="ref-for-substitute-a-var">substitute a var()</a> to be more generally about "substitute a reference"
	and just use that for both of these functions.</p>
   <p><a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①②">attr()</a> functions are <a data-link-type="dfn" href="#substitute-an-attr" id="ref-for-substitute-an-attr①">substituted</a> at computed-value time.
	If a declaration,
	once all <span class="css" id="ref-for-funcdef-attr①③">attr()</span> functions are substituted in,
	does not match its declared grammar,
	the declaration is <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time">invalid at computed-value time</a>.</p>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="substitute-an-attr">substitute an <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①④">attr()</a></dfn>:</p>
   <ol>
    <li data-md>
     <p>If the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①⑤">attr()</a> function has a <a data-link-type="dfn" href="#attr-substitution-value" id="ref-for-attr-substitution-value①⑤">substitution value</a>,
replace the <span class="css" id="ref-for-funcdef-attr①⑥">attr()</span> function by the <span id="ref-for-attr-substitution-value①⑥">substitution value</span>.</p>
    <li data-md>
     <p>Otherwise, if the <span class="css">atr()</span> function has a fallback value as its last argument,
replace the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①⑦">attr()</a> function by the fallback value.
If there are any <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-variables-1/#funcdef-var" id="ref-for-funcdef-var①">var()</a> or <span class="css" id="ref-for-funcdef-attr①⑧">attr()</span> references in the fallback, <a data-link-type="dfn" href="#substitute-an-attr" id="ref-for-substitute-an-attr②">substitute</a> them as well.</p>
    <li data-md>
     <p>Otherwise, the property containing the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①⑨">attr()</a> function
is <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time①">invalid at computed-value time</a>.</p>
   </ol>
   <h2 class="heading settled" data-level="11" id="math"><span class="secno">11. </span><span class="content"> Mathematical Expressions</span><span id="calc-notation"></span><a class="self-link" href="#math"></a></h2>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="math function" id="math-function">math functions</dfn> (<a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc⑤">calc()</a>, <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp">clamp()</a>, <a class="css" data-link-type="maybe" href="#funcdef-sin" id="ref-for-funcdef-sin">sin()</a>,
	and others defined in this chapter)
	allow numeric CSS values
	to be written as mathematical expressions.</p>
   <p>A <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②">math function</a> represents a numeric value,
	one of:</p>
   <ul>
    <li data-md>
     <p><a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①⑧" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>,</p>
    <li data-md>
     <p><a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value⑧" title="Expands to: hz | khz">&lt;frequency></a>,</p>
    <li data-md>
     <p><a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①⓪" title="Expands to: turn | rad | grad | deg">&lt;angle></a>,</p>
    <li data-md>
     <p><a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value⑧" title="Expands to: s | ms">&lt;time></a>,</p>
    <li data-md>
     <p><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-grid-1/#typedef-flex" id="ref-for-typedef-flex①" title="Expands to: fr">&lt;flex></a>,</p>
    <li data-md>
     <p><a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value⑤" title="Expands to: dppx | x | dpcm | dpi">&lt;resolution></a>,</p>
    <li data-md>
     <p><a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②④">&lt;percentage></a>,</p>
    <li data-md>
     <p><a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①⑤">&lt;number></a>,</p>
    <li data-md>
     <p><a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value⑨">&lt;integer></a></p>
   </ul>
   <p>...or the <a class="production css" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage⑦">&lt;length-percentage></a>/etc mixed types,
	and can be used wherever such a value would be valid.</p>
   <h3 class="heading settled" data-level="11.1" id="calc-func"><span class="secno">11.1. </span><span class="content"> Basic Arithmetic: <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc⑥">calc()</a></span><a class="self-link" href="#calc-func"></a></h3>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-calc">calc()</dfn> function is a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③">math function</a> that allows basic arithmetic to be performed on numerical values,
	using addition (<span class="css">+</span>), subtraction (<span class="css">-</span>), multiplication (<span class="css">*</span>), division (<span class="css">/</span>),
	and parentheses.</p>
   <p>A <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc⑦">calc()</a> function contains a single <dfn class="dfn-paneled" data-dfn-for="calc()" data-dfn-type="dfn" data-export id="calc-calculation">calculation</dfn>,
	which is a sequence of values interspersed with operators,
	and possibly grouped by parentheses
	(matching the <a class="production css" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum">&lt;calc-sum></a> grammar),
	which represents the result of evaluating the expression
	using standard operator precedence rules.
	(<span class="css">*</span> and <span class="css">/</span> bind tighter than <span class="css">+</span> and <span class="css">-</span>,
	and operators are otherwise evaluated left-to-right.)
	The <span class="css" id="ref-for-funcdef-calc⑧">calc()</span> function represents the result of its contained <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation">calculation</a>.</p>
   <p>Components of a <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①">calculation</a> can be literal values
	(such as <span class="css">5px</span>),
	other <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④">math functions</a>,
	or other expressions, such as <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②⓪">attr()</a>,
	that evaluate to a valid argument type (like <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①⑨" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>).</p>
   <div class="example" id="example-1daf921b">
    <a class="self-link" href="#example-1daf921b"></a> 
    <p><a data-link-type="dfn" href="#math-function" id="ref-for-math-function⑤">Math functions</a> can be used to combine value that use different units.
		In this example the author wants the <em>margin box</em> of each section
		to take up 1/3 of the space,
		so they start with <span class="css">100%/3</span>,
		then subtract the element’s borders and margins.
		(<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing" id="ref-for-propdef-box-sizing">box-sizing</a> can automatically achieve this effect for borders and padding,
		but a <span id="ref-for-math-function⑥">math function</span> is needed if you want to include margins.)</p>
<pre class="lang-css highlight"><c- f>section </c-><c- p>{</c->
  <c- k>float</c-><c- p>:</c-> left<c- p>;</c->
  <c- k>margin</c-><c- p>:</c-> <c- m>1</c-><c- l>em</c-><c- p>;</c-> <c- k>border</c-><c- p>:</c-> solid <c- m>1</c-><c- l>px</c-><c- p>;</c->
  <c- k>width</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>100</c-><c- l>%</c-> <c- p>/</c-> <c- m>3</c-> - <c- m>2</c-> * 1em - 2 * 1px);
}
</pre>
    <p>Similarly, in this example the gradient will show a color transition
		only in the first and last <span class="css">20px</span> of the element:</p>
<pre class="lang-css highlight"><c- f>.fade </c-><c- p>{</c->
  <c- k>background-image</c-><c- p>:</c-> <c- nf>linear-gradient</c-><c- p>(</c->silver <c- m>0</c-><c- l>%</c-><c- p>,</c-> white <c- m>20</c-><c- l>px</c-><c- p>,</c->
                                    white <c- nf>calc</c-><c- p>(</c-><c- m>100</c-><c- l>%</c-> - <c- m>20</c-><c- l>px</c-><c- p>),</c-> silver <c- m>100</c-><c- l>%</c-><c- p>);</c->
<c- p>}</c->
</pre>
   </div>
   <div class="example" id="example-a73c5015">
    <a class="self-link" href="#example-a73c5015"></a> 
    <p><a data-link-type="dfn" href="#math-function" id="ref-for-math-function⑦">Math functions</a> can also be useful just to express values
		in a more natural, readable fashion,
		rather than as an obscure decimal.
		For example, the following sets the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size⑤">font-size</a> so that exactly 35em fits within the viewport,
		ensuring that roughly the same amount of text always fills the screen no matter the screen size.</p>
<pre class="lang-css highlight"><c- f>:root </c-><c- p>{</c->
  <c- k>font-size</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>100</c-><c- l>vw</c-> <c- p>/</c-> <c- m>35</c-><c- p>);</c->
<c- p>}</c->
</pre>
    <p>Functionality-wise, this is identical to just writing <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size⑥">font-size: 2.857vw</a>,
		but then the intent
		(that <span class="css">35em</span> fills the viewport)
		is much less clear to someone reading the code;
		the later reader will have to reverse the math themselves
		to figure out that 2.857 is meant to approximate 100/35.</p>
   </div>
   <div class="example" id="example-364b1cfd">
    <a class="self-link" href="#example-364b1cfd"></a> 
    <p>Standard mathematical precedence rules for the operators apply: <span class="css">calc(2 + 3 * 4)</span> is equal to <span class="css">14</span>,
		not <span class="css">20</span>.</p>
    <p>Parentheses can be used to manipulate precedence: <span class="css">calc((2 + 3) * 4)</span> is instead equal to <span class="css">20</span>.</p>
    <p>Parentheses and nesting additional <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc⑨">calc()</a> functions are equivalent;
		the preceding expression could equivalently have been written as <span class="css">calc(calc(2 + 3) * 4)</span>.
		This can be useful when building up values piecemeal via <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-variables-1/#funcdef-var" id="ref-for-funcdef-var②">var()</a>,
		such as in the following example:</p>
<pre class="lang-css highlight"><c- f>.aspect-ratio-box </c-><c- p>{</c->
  <c- k>--ar</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>16</c-> <c- p>/</c-> <c- m>9</c-><c- p>);</c->
  <c- k>--w</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>100</c-><c- l>%</c-> <c- p>/</c-> <c- m>3</c-><c- p>);</c->
  <c- k>--h</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- nf>var</c-><c- p>(</c->--w<c- p>)</c-> <c- p>/</c-> <c- nf>var</c-><c- p>(</c->--ar<c- p>));</c->
  <c- k>width</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--w<c- p>);</c->
  <c- k>height</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--h<c- p>);</c->
<c- p>}</c->
</pre>
    <p>Altho <a class="property" data-link-type="propdesc">--ar</a> <em>could</em> have been written as simply <span class="css">--ar: (16 / 9);</span>, <span class="property">--w</span> is used both on its own (in <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width⑧">width</a>)
		and as a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①⓪">calc()</a> component (in <span class="property">--h</span>),
		so it has to be written as a full <span class="css" id="ref-for-funcdef-calc①①">calc()</span> function itself.</p>
   </div>
   <h3 class="heading settled" data-level="11.2" id="comp-func"><span class="secno">11.2. </span><span class="content"> Comparison Functions: <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min">min()</a>, <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max">max()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp①">clamp()</a></span><a class="self-link" href="#comp-func"></a></h3>
   <p>The comparison functions of <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min①">min()</a>, <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max①">max()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp②">clamp()</a> compare multiple <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②">calculations</a> and represent the value of one of them.</p>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-min">min()</dfn> or <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-max">max()</dfn> functions
	contain one or more comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation③">calculations</a>,
	and represent the smallest (most negative) or largest (most positive) of them, respectively.</p>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-clamp">clamp()</dfn> function takes three <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation④">calculations</a>—<wbr>a minimum value, a central value, and a maximum value—<wbr>and represents its central calculation,
	clamped according to its min and max calculations,
	favoring the min calculation if it conflicts with the max.
	(That is, given <span class="css">clamp(MIN, VAL, MAX)</span>,
	it represents exactly the same value as <span class="css">max(MIN, min(VAL, MAX))</span>).</p>
   <div class="example" id="example-67532822">
    <a class="self-link" href="#example-67532822"></a> 
    <p><a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min②">min()</a>, <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max②">max()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp③">clamp()</a> can be used to make sure a value doesn’t exceed a "safe" limit:
		For example, "responsive type" that sets <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size⑦">font-size</a> with viewport units
		might still want a minimum size to ensure readability:</p>
<pre class="lang-css highlight"><c- f>.type </c-><c- p>{</c->
  <c- c>/* Set font-size to 10x the average of vw and vh,</c->
<c- c>     but don’t let it go below 12px. */</c->
  <c- k>font-size</c-><c- p>:</c-> <c- nf>max</c-><c- p>(</c-><c- m>10</c-> * (1vw + 1vh) / 2, 12px);
}
</pre>
    <p class="note" role="note"><span>Note:</span> Full math expressions are allowed in each of the arguments;
		there’s no need to nest a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①②">calc()</a> inside!
		You can also provide more than two arguments,
		if you have multiple constraints to apply.</p>
   </div>
   <div class="example" id="example-3f7f1368">
    <a class="self-link" href="#example-3f7f1368"></a> An occasional point of confusion when using <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min③">min()</a>/<a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max③">max()</a> is that you use <span class="css" id="ref-for-funcdef-max④">max()</span> to impose a minimum value on something
		(that is, properties like <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-width" id="ref-for-propdef-min-width">min-width</a> effectively use <span class="css" id="ref-for-funcdef-max⑤">max()</span>),
		and <span class="css" id="ref-for-funcdef-min④">min()</span> to impose a maximum value on something;
		it’s easy to accidentally reach for the opposite function
		and try to use <span class="css" id="ref-for-funcdef-min⑤">min()</span> to add a minimum size.
		Using <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp④">clamp()</a> can make the code read more naturally,
		as the value is nestled between its minimum and maximum: 
<pre class="lang-css highlight"><c- f>.type </c-><c- p>{</c->
  <c- c>/* Force the font-size to stay between 12px and 100px */</c->
  <c- k>font-size</c-><c- p>:</c-> <c- nf>clamp</c-><c- p>(</c-><c- m>12</c-><c- l>px</c-><c- p>,</c-> <c- m>10</c-> * (1vw + 1vh) / 2, 100px);
}
</pre>
   </div>
   <div class="note" role="note">
     Note that <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp⑤">clamp()</a>,
		matching CSS conventions elsewhere,
		has its minimum value "win" over its maximum value
		if the two are in the "wrong order".
		That is, <span class="css">clamp(100px, ..., 50px)</span> will resolve to <span class="css">100px</span>,
		exceeding its stated "max" value. 
    <p>If alternate resolution mechanics are desired
		they can be achieved by combining <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp⑥">clamp()</a> with <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min⑥">min()</a> or <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max⑥">max()</a>:</p>
    <dl>
     <dt data-md>To have MAX win over MIN:
     <dd data-md>
      <p><span class="css">clamp(min(MIN, MAX), VAL, MAX)</span>.
If you want to avoid repeating the MAX calculation,
you can just reverse the nesting of functions that <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp⑦">clamp()</a> is defined against—<wbr><span class="css">min(MAX, max(MIN, VAL))</span>.</p>
     <dt data-md>To have MAX and MIN "swap" when they’re in the wrong order:
     <dd data-md>
      <p><span class="css">clamp(min(MIN, MAX), VAL, max(MIN, MAX))</span>.
Unfortunately, there’s no easy way to do this without repeating the MIN and MAX terms.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="11.3" id="trig-funcs"><span class="secno">11.3. </span><span class="content"> Trigonometric Functions: <a class="css" data-link-type="maybe" href="#funcdef-sin" id="ref-for-funcdef-sin①">sin()</a>, <a class="css" data-link-type="maybe" href="#funcdef-cos" id="ref-for-funcdef-cos">cos()</a>, <a class="css" data-link-type="maybe" href="#funcdef-tan" id="ref-for-funcdef-tan">tan()</a>, <a class="css" data-link-type="maybe" href="#funcdef-asin" id="ref-for-funcdef-asin">asin()</a>, <a class="css" data-link-type="maybe" href="#funcdef-acos" id="ref-for-funcdef-acos">acos()</a>, <a class="css" data-link-type="maybe" href="#funcdef-atan" id="ref-for-funcdef-atan">atan()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-atan2" id="ref-for-funcdef-atan2">atan2()</a></span><a class="self-link" href="#trig-funcs"></a></h3>
   <p>The trigonometric functions—<wbr><a class="css" data-link-type="maybe" href="#funcdef-sin" id="ref-for-funcdef-sin②">sin()</a>, <a class="css" data-link-type="maybe" href="#funcdef-cos" id="ref-for-funcdef-cos①">cos()</a>, <a class="css" data-link-type="maybe" href="#funcdef-tan" id="ref-for-funcdef-tan①">tan()</a>, <a class="css" data-link-type="maybe" href="#funcdef-asin" id="ref-for-funcdef-asin①">asin()</a>, <a class="css" data-link-type="maybe" href="#funcdef-acos" id="ref-for-funcdef-acos①">acos()</a>, <a class="css" data-link-type="maybe" href="#funcdef-atan" id="ref-for-funcdef-atan①">atan()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-atan2" id="ref-for-funcdef-atan2①">atan2()</a>—<wbr>compute the various basic trigonometric relationships.</p>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="sin()" id="funcdef-sin">sin(A)</dfn>, <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="cos()" id="funcdef-cos">cos(A)</dfn>, and <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="tan()" id="funcdef-tan">tan(A)</dfn> functions
	all contain a single <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation⑤">calculation</a> which must resolve to either a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①⑥">&lt;number></a> or an <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①①" title="Expands to: turn | rad | grad | deg">&lt;angle></a>,
	and compute their corresponding function
	by interpreting the result of their argument as radians.
	(That is, <span class="css">sin(45deg)</span>, <span class="css">sin(.125turn)</span>, and <span class="css">sin(3.14159 / 4)</span> all represent the same value,
	approximately <span class="css">.707</span>.)
	They all represent a <span class="production" id="ref-for-number-value①⑦">&lt;number></span>; <a class="css" data-link-type="maybe" href="#funcdef-sin" id="ref-for-funcdef-sin③">sin()</a> and <a class="css" data-link-type="maybe" href="#funcdef-cos" id="ref-for-funcdef-cos②">cos()</a> will always return a number between −1 and 1,
	while <a class="css" data-link-type="maybe" href="#funcdef-tan" id="ref-for-funcdef-tan②">tan()</a> can return any number between −∞ and +∞.
	(See <a href="#calc-type-checking">§ 11.6 Type Checking</a> for details on how <a data-link-type="dfn" href="#math-function" id="ref-for-math-function⑧">math functions</a> handle ∞.)</p>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="asin()" id="funcdef-asin">asin(A)</dfn>, <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="acos()" id="funcdef-acos">acos(A)</dfn>, and <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="atan()" id="funcdef-atan">atan(A)</dfn> functions
	are the "arc" or "inverse" trigonometric functions,
	representing the inverse function to their corresponding "normal" trig functions.
	All of them contain a single <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation⑥">calculation</a> which must resolve to a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①⑧">&lt;number></a>,
	and compute their corresponding function,
	interpreting their result as a number of radians,
	representing an <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①②" title="Expands to: turn | rad | grad | deg">&lt;angle></a>.
	The angle returned by <a class="css" data-link-type="maybe" href="#funcdef-asin" id="ref-for-funcdef-asin②">asin()</a> must be normalized to the range [<span class="css">-90deg</span>, <span class="css">90deg</span>];
	the angle returned by <a class="css" data-link-type="maybe" href="#funcdef-acos" id="ref-for-funcdef-acos②">acos()</a> to the range [<span class="css">0deg</span>, <span class="css">180deg</span>];
	and the angle returned by <a class="css" data-link-type="maybe" href="#funcdef-atan" id="ref-for-funcdef-atan②">atan()</a> to the range [<span class="css">-90deg</span>, <span class="css">90deg</span>].</p>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="atan2()" id="funcdef-atan2">atan2(A, B)</dfn> function
	contains two comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation⑦">calculations</a>, A and B.
	A and B can resolve to any <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①⑨">&lt;number></a>, <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension②">&lt;dimension></a>, or <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②⑤">&lt;percentage></a>,
	but must have the <em>same</em> <a data-link-type="dfn" href="#determine-the-type-of-a-calculation" id="ref-for-determine-the-type-of-a-calculation">type</a>,
	or else the function is invalid.
	The function returns the <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①③" title="Expands to: turn | rad | grad | deg">&lt;angle></a> between the positive X-axis and the point (B,A).
	The returned angle must be normalized to the interval (<span class="css">-180deg</span>, <span class="css">180deg</span>]
	(that is, greater than <span class="css">-180deg</span>, and less than or equal to <span class="css">180deg</span>).</p>
   <p class="note" role="note"><span>Note:</span> <span class="css">atan2(Y, X)</span> is <em>generally</em> equivalent to <span class="css">atan(Y / X)</span>,
	but it gives a better answer when the point in question may include negative components. <span class="css">atan2(1, -1)</span>, corresponding to the point (-1, 1),
	returns <span class="css">135deg</span>,
	distinct from <span class="css">atan2(-1, 1)</span>, corresponding to the point (1, -1),
	which returns <span class="css">-45deg</span>.
	In contrast, <span class="css">atan(1 / -1)</span> and <span class="css">atan(-1 / 1)</span> both return<span class="css">-45deg</span>,
	because the internal calculation resolves to <span class="css">-1</span> for both.</p>
   <h4 class="heading settled" data-level="11.3.1" id="trig-infinities"><span class="secno">11.3.1. </span><span class="content"> Argument Ranges</span><a class="self-link" href="#trig-infinities"></a></h4>
   <p>In <span class="css">sin(A)</span>, <span class="css">cos(A)</span>, or <span class="css">tan(A)</span>,
	if A is infinite,
	the result is NaN.
	(See <a href="#calc-type-checking">§ 11.6 Type Checking</a> for details on how <a data-link-type="dfn" href="#math-function" id="ref-for-math-function⑨">math functions</a> handle NaN.)</p>
   <p>In <span class="css">sin(A)</span> or <span class="css">tan(A)</span>,
	if A is 0⁻,
	the result is 0⁻.</p>
   <p>In <span class="css">tan(A)</span>, if A is one of the asymptote values
	(such as <span class="css">90deg</span>, <span class="css">270deg</span>, etc),
	the result must be +∞ for <span class="css">90deg</span> and all values a multiple of <span class="css">360deg</span> from that
	(such as <span class="css">-270deg</span> or <span class="css">450deg</span>),
	and −∞ for <span class="css">-90deg</span> and all values a multiple of <span class="css">360deg</span> from that
	(such as <span class="css">-450deg</span> or <span class="css">270deg</span>).</p>
   <p class="note" role="note"><span>Note:</span> This is only relevant for units that can exactly represent the asymptotic values,
	such as <a class="css" data-link-type="maybe" href="#deg" id="ref-for-deg②">deg</a> or <a class="css" data-link-type="maybe" href="#grad" id="ref-for-grad①">grad</a>. <a class="css" data-link-type="maybe" href="#rad" id="ref-for-rad①">rad</a> cannot,
	and so whether the result is a very large negative or positive value
	can depend on rounding and precise details of how numbers are internally stored.
	It’s recommended you don’t depend on this behavior if using such units.</p>
   <p>In <span class="css">asin(A)</span> or <span class="css">acos(A)</span>,
	if A is less than -1 or greater than 1,
	the result is NaN.</p>
   <p>In <span class="css">acos(A)</span>,
	if A is exactly 1,
	the result is 0.</p>
   <p>In <span class="css">asin(A)</span> or <span class="css">atan(A)</span>,
	if A is 0⁻,
	the result is 0⁻.</p>
   <p>In <span class="css">atan(A)</span>,
	if A is +∞,
	the result is <span class="css">90deg</span>;
	if A is −∞,
	the result is <span class="css">-90deg</span>.</p>
   <p>In <span class="css">atan2(Y, X)</span>,
	the following table gives the results for all unusual argument combinations:</p>
   <table class="data">
    <thead>
     <tr>
      <td colspan="2" style="border:none">
      <th colspan="6">X 
     <tr>
      <td colspan="2" style="border:none">
      <th>−∞ 
      <th>-finite 
      <th>0⁻ 
      <th>0⁺ 
      <th>+finite 
      <th>+∞ 
    <tbody>
     <tr>
      <th rowspan="6" style="border-right:1px solid silver">Y 
      <th style="border-right: black 2px solid">−∞ 
      <td>-135deg 
      <td>-90deg 
      <td>-90deg 
      <td>-90deg 
      <td>-90deg 
      <td>-45deg 
     <tr>
      <th>-finite 
      <td>-180deg 
      <td>(normal) 
      <td>-90deg 
      <td>-90deg 
      <td>(normal) 
      <td>0⁻deg 
     <tr>
      <th>0⁻ 
      <td>-180deg 
      <td>-180deg 
      <td>-180deg 
      <td>0⁻deg 
      <td>0⁻deg 
      <td>0⁻deg 
     <tr>
      <th>0⁺ 
      <td>180deg 
      <td>180deg 
      <td>180deg 
      <td>0⁺deg 
      <td>0⁺deg 
      <td>0⁺deg 
     <tr>
      <th>+finite 
      <td>180deg 
      <td>(normal) 
      <td>90deg 
      <td>90deg 
      <td>(normal) 
      <td>0⁺deg 
     <tr>
      <th>+∞ 
      <td>135deg 
      <td>90deg 
      <td>90deg 
      <td>90deg 
      <td>90deg 
      <td>45deg 
   </table>
   <p class="note" role="note"><span>Note:</span> All of these behaviors are intended to match the "standard" definitions of these functions
	as implemented by most programming languages,
	in particular as implemented in JS.</p>
   <p class="note" role="note"><span>Note:</span> The behavior of <span class="css">tan(90deg)</span>,
	while not constrained by JS behavior
	(because the JS function’s input is in radians,
	and one cannot perfectly express a value of π/2 in JS numbers),
	is defined so that roundtripping of values works; <span class="css">tan(atan(1 / 0))</span> yields +∞, <span class="css">tan(atan(-1 / 0))</span> yields −∞, <span class="css">atan(tan(90deg))</span> yields <span class="css">90deg</span>,
	and <span class="css">atan(tan(-90deg))</span> yields <span class="css">-90deg</span>.</p>
   <h3 class="heading settled" data-level="11.4" id="exponent-funcs"><span class="secno">11.4. </span><span class="content"> Exponential  Functions: <a class="css" data-link-type="maybe" href="#funcdef-pow" id="ref-for-funcdef-pow">pow()</a>, <a class="css" data-link-type="maybe" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt">sqrt()</a>, <a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot">hypot()</a></span><a class="self-link" href="#exponent-funcs"></a></h3>
   <p>The exponential functions—<wbr><a class="css" data-link-type="maybe" href="#funcdef-pow" id="ref-for-funcdef-pow①">pow()</a>, <a class="css" data-link-type="maybe" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt①">sqrt()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot①">hypot()</a>—<wbr>compute various exponential functions with their arguments.</p>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="pow()" id="funcdef-pow">pow(A, B)</dfn> function
	contains two comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation⑧">calculations</a> A and B,
	both of which must resolve to <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②⓪">&lt;number></a>s,
	and returns the result of raising A to the power of B,
	returning the value as a <span class="production" id="ref-for-number-value②①">&lt;number></span>.</p>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="sqrt()" id="funcdef-sqrt">sqrt(A)</dfn> function
	contains a single <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation⑨">calculation</a> which must resolve to a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②②">&lt;number></a>,
	and returns the square root of the value
	as a <span class="production" id="ref-for-number-value②③">&lt;number></span>.
	(<span class="css">sqrt(X)</span> and <span class="css">pow(X, .5)</span> are basically equivalent,
	differing only in some error-handling; <a class="css" data-link-type="maybe" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt②">sqrt()</a> is a common enough function
	that it is provided as a convenience.)</p>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="hypot()" id="funcdef-hypot">hypot(A, …)</dfn> function
	contains one or more comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①⓪">calculations</a>,
	and returns the length of an N-dimensional vector
	with components equal to each of the <span id="ref-for-calc-calculation①①">calculations</span>.
	(That is,
	the square root of the sum of the squares of its arguments.)
	The argument <span id="ref-for-calc-calculation①②">calculations</span> can resolve to any <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②④">&lt;number></a>, <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension③">&lt;dimension></a>, or <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②⑥">&lt;percentage></a>,
	but must have the <em>same</em> <a data-link-type="dfn" href="#determine-the-type-of-a-calculation" id="ref-for-determine-the-type-of-a-calculation①">type</a>,
	or else the function is invalid;
	the result will have the same <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type">type</a> as the arguments.</p>
   <details class="note">
    <summary>Why does <a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot②">hypot()</a> allow dimensions (values with units), but <a class="css" data-link-type="maybe" href="#funcdef-pow" id="ref-for-funcdef-pow②">pow()</a> and <a class="css" data-link-type="maybe" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt③">sqrt()</a> only work on numbers?</summary>
    <p>You are allowed to write expressions like <span class="css">hypot(30px, 40px)</span>,
		which resolves to <span class="css">50px</span>,
		but you aren’t allowed to write the expression <span class="css">sqrt(pow(30px, 2) + pow(40px, 2))</span>,
		despite the two being equivalent in most mathematical systems.</p>
    <p>There are two reasons for this:
		numeric precision in the exponents,
		and clashing expectations from authors.</p>
    <p>First, numerical precision.
		For a <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①">type</a> to <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match" id="ref-for-cssnumericvalue-match">match</a> a CSS production like <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②⓪" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>,
		it needs to have a single unit with its exponent set to exactly 1.
		Theoretically, expressions like <span class="css">pow(pow(30px, 3), 1/3)</span> should result in exactly that:
		the inner <span class="css">pow(30px, 3)</span> would resolve to a value of 27000 with a <span id="ref-for-cssnumericvalue-type②">type</span> of «[ "length" → 3 ]»
		(aka <span class="production" id="ref-for-length-value②①" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></span>³),
		and then the <span class="css">pow(X, 1/3)</span> would cube-root the value back down to 30 and multiply the exponent by 1/3,
		giving «[ "length" → 1 ]»,
		which <span id="ref-for-cssnumericvalue-match①">matches</span> <span class="production" id="ref-for-length-value②②" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></span>.</p>
    <p>In the realm of pure mathematics, that’s guaranteed to work out;
		in the real-world of computers using binary floating-point arithmetic,
		in some cases the powers might not exactly cancel out,
		leaving you with an invalid <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①⓪">math function</a> for confusing, hard-to-track-down reasons.
		(For a JS example,
		evaluate <code>Math.pow(Math.pow(30, 10/3), .1+.1+.1)</code>;
		the result is not exactly 30,
		because <code>.1+.1+.1</code> is not exactly 3/10.
		Instead, <code>(10/3) * (.1 + .1 + .1)</code> is <em>slightly greater</em> than 1.)</p>
    <p>Requiring authors to cast their value down into a number,
		do all the math on the raw number,
		then finally send it back to the desired unit,
		while inconvenient,
		ensures that numerical precision won’t bite anyone: <span class="css">calc(pow(pow(30px / 1px, 3), 1/3) * 1px)</span> is guaranteed to resolve to a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②③" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>,
		with a value that, if not exactly 30, is at least very close to 30,
		even if numerical precision actually prevents the powers from exactly canceling.</p>
    <p>Second, clashing expectations.
		It’s not uncommon for authors to expect <span class="css">pow(30px, 2)</span> to result in <span class="css">900px</span> (such as in <a href="https://github.com/sass/sass/issues/684">this Sass issue</a>);
		that is,
		just squaring the numerical value
		and leaving the unit alone.
		This, however, means the result is dependent on what unit you’re expressing the argument in;
		if <span class="css">1em</span> is <span class="css">16px</span>,
		then <span class="css">pow(1em, 2)</span> would give <span class="css">1em</span>,
		while <span class="css">pow(16px, 2)</span> would give <span class="css">256px</span>, or <span class="css">16em</span>,
		which are very different values for what should otherwise be identical input arguments!
		This sort of input dependency is troublesome for CSS,
		which generally allows values to be <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit⑦">canonicalized</a> freely;
		it also makes more complex expressions like <span class="css">pow(2em + 10px, 2)</span> difficult to interpret.</p>
    <p>Again, requiring authors to cast their value down into a number
		and then back up again into the desired unit
		sidesteps these issues; <span class="css">pow(30, 2)</span> is indeed <span class="css">900</span>,
		and the author can interpret that however they wish.</p>
    <hr>
    <p>On the other hand, <a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot③">hypot()</a> doesn’t suffer from these problems.
		Numerical precision in units isn’t a concern,
		as the inputs and output all have the same type.
		The result isn’t unit-dependent, either,
		due to the nature of the operation; <span class="css">hypot(3em, 4em)</span> and <span class="css">hypot(48px, 64px)</span> both result in the same length
		when <span class="css">1em</span> equals <span class="css">16px</span>: <span class="css">5em</span> or <span class="css">80px</span>.
		Thus it’s fine to let author use dimensions directly in <span class="css" id="ref-for-funcdef-hypot④">hypot()</span>.</p>
   </details>
   <div class="example" id="example-bebe620e">
    <a class="self-link" href="#example-bebe620e"></a> The <a class="css" data-link-type="maybe" href="#funcdef-pow" id="ref-for-funcdef-pow③">pow()</a> function can be useful for strategies like <a href="https://www.modularscale.com/">CSS Modular Scale</a>,
		which relates all the font-sizes on a page to each other by a fixed ratio. 
    <p>These sizes can be easily written into custom properties like:</p>
<pre class="lang-css highlight"><c- f>:root </c-><c- p>{</c->
  <c- k>--h6</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>1</c-><c- l>rem</c-> * pow(1.5, -1));
  --h5: calc(1rem * pow(1.5, 0));
  --h4: calc(1rem * pow(1.5, 1));
  --h3: calc(1rem * pow(1.5, 2));
  --h2: calc(1rem * pow(1.5, 3));
  --h1: calc(1rem * pow(1.5, 4));
}
</pre>
    <p>...rather than writing out the values in pre-calculated numbers like <span class="css">5.0625rem</span> (what <span class="css">calc(1rem * pow(1.5, 4))</span> resolves to)
		which have less clear provenance when encountered in a stylesheet.</p>
   </div>
   <div class="example" id="example-d7f26d9d">
    <a class="self-link" href="#example-d7f26d9d"></a> With a single argument, <a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot⑤">hypot()</a> gives the absolute value of its input; <span class="css">hypot(2em)</span> and <span class="css">hypot(-2em)</span> both resolve to <span class="css">2em</span>. 
    <p>With more arguments,
		it gives the size of the main diagonal of a box
		whose side lengths are given by the arguments.
		This can be useful for transform-related things,
		giving the distance that an element will actually travel
		when it’s translated by a particular X, Y, and Z amount.</p>
    <p>For example, <span class="css">hypot(30px, 40px)</span> resolves to <span class="css">50px</span>,
		which is indeed the distance between an element’s starting and ending positions
		when it’s translated by a <span class="css">translate(30px, 40px)</span> transform.
		If an author wanted elements to get smaller as they moved further away from their starting point
		(drawing some sort of word cloud, for example),
		they could then use this distance in their scaling factor calculations.</p>
   </div>
   <h4 class="heading settled" data-level="11.4.1" id="exponent-infinities"><span class="secno">11.4.1. </span><span class="content"> Argument Ranges</span><a class="self-link" href="#exponent-infinities"></a></h4>
   <p>In <span class="css">pow(A, B)</span>,
	if A is negative and finite,
	and B is finite,
	B must be an integer,
	or else the result is NaN.</p>
   <p>If A or B are infinite or 0,
	the following tables give the results:</p>
   <table class="data" style="table-layout:fixed">
    <thead>
     <tr>
      <td>
      <th>A is −∞ 
      <th>A is 0⁻ 
      <th>A is 0⁺ 
      <th>A is +∞ 
    <tbody>
     <tr>
      <th>B is −finite 
      <td>0⁻ if B is an odd integer, 0⁺ otherwise 
      <td>−∞ if B is an odd integer, +∞ otherwise 
      <td>+∞ 
      <td>0⁺ 
     <tr>
      <th>B is 0 
      <td colspan="4">always 1 
     <tr>
      <th>B is +finite 
      <td>−∞ if B is an odd integer, +∞ otherwise 
      <td>0⁻ if B is an odd integer, 0⁺ otherwise 
      <td>0⁺ 
      <td>+∞ 
   </table>
   <table class="data">
    <thead>
     <tr>
      <td>
      <th>A is &lt; -1 
      <th>A is -1 
      <th>-1 &lt; A &lt; 1 
      <th>A is 1 
      <th>A is > 1 
    <tbody>
     <tr>
      <th>B is +∞ 
      <td>result is +∞ 
      <td>result is NaN 
      <td>result is 0⁺ 
      <td>result is NaN 
      <td>result is +∞ 
     <tr>
      <th>B is −∞ 
      <td>result is 0⁺ 
      <td>result is NaN 
      <td>result is +∞ 
      <td>result is NaN 
      <td>result is 0⁺ 
   </table>
   <p>In <span class="css">sqrt(A)</span>,
	if A is +∞,
	the result is +∞.
	If A is 0⁻,
	the result is 0⁻.
	If A is less than 0,
	the result is NaN.</p>
   <p>In <span class="css">hypot(A, …)</span>,
	if any of the inputs are infinite,
	the result is +∞.</p>
   <p>(See <a href="#calc-type-checking">§ 11.6 Type Checking</a> for details on how <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①①">math functions</a> handle NaN and infinities.)</p>
   <div class="note" role="note">
     All of these behaviors are intended to match the "standard" definitions of these functions
		as implemented by most programming languages,
		in particular as implemented in JS. 
    <p>The only divergences from the behavior of the equivalent JS functions
		are that NaN is "infectious" in <em>every</em> function,
		forcing the function to return NaN if any argument calculation is NaN.</p>
    <details>
     <summary>Details of the JS Behavior</summary>
     <p>There are two cases in JS where a NaN is not "infectious"
			to the math function it finds itself in:</p>
     <ul>
      <li data-md>
       <p><code class="highlight">Math<c- p>.</c->hypot<c- p>(</c-><c- kc>Infinity</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>)</c-></code> will return <code class="highlight"><c- kc>Infinity</c-></code>.</p>
      <li data-md>
       <p><code class="highlight">Math<c- p>.</c->pow<c- p>(</c-><c- kc>NaN</c-><c- p>,</c-> <c- mi>0</c-><c- p>)</c-></code> will return <code class="highlight"><c- mi>1</c-></code>.</p>
     </ul>
     <p>The logic appears to be that,
			if you replace the NaN with <em>any</em> Number,
			the return value will be the same.
			However, this logic is not applied consistently to the <code class="highlight">Math</code> functions: <code class="highlight">Math<c- p>.</c->max<c- p>(</c-><c- kc>Infinity</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>)</c-></code> returns <code class="highlight"><c- kc>NaN</c-></code>, not <code class="highlight"><c- kc>Infinity</c-></code>;
			the same is true of <code class="highlight">Math<c- p>.</c->min<c- p>(</c-><c- o>-</c-><c- kc>Infinity</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>)</c-></code>.</p>
     <p>Because this is an error corner case,
			JS isn’t consistent on the matter,
			and NaN recognition/handling of <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①③">calculations</a> is likely done at a higher CSS level
			rather than in the internal math functions anyway,
			consistency in CSS was chosen to be more important,
			so all functions were defined to have "infection" NaN.</p>
    </details>
   </div>
   <h3 class="heading settled" data-level="11.5" id="calc-syntax"><span class="secno">11.5. </span><span class="content"> Syntax</span><a class="self-link" href="#calc-syntax"></a></h3>
   <p>The syntax of a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①②">math function</a> is:</p>
<pre class="prod"><a class="production" data-link-type="function" href="#funcdef-calc" id="ref-for-funcdef-calc①③">&lt;calc()></a>  = calc( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①">&lt;calc-sum></a> )
<a class="production" data-link-type="function" href="#funcdef-min" id="ref-for-funcdef-min⑦">&lt;min()></a>   = min( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum②">&lt;calc-sum></a><a data-link-type="grammar" href="#mult-comma" id="ref-for-mult-comma④">#</a> )
<a class="production" data-link-type="function" href="#funcdef-max" id="ref-for-funcdef-max⑦">&lt;max()></a>   = max( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum③">&lt;calc-sum></a><a data-link-type="grammar" href="#mult-comma" id="ref-for-mult-comma①">#</a> )
<a class="production" data-link-type="function" href="#funcdef-clamp" id="ref-for-funcdef-clamp⑧">&lt;clamp()></a> = clamp( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum④">&lt;calc-sum></a><a data-link-type="grammar" href="#mult-comma" id="ref-for-mult-comma②">#{3}</a> )
<a class="production" data-link-type="function" href="#funcdef-sin" id="ref-for-funcdef-sin④">&lt;sin()></a>   = sin( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum⑤">&lt;calc-sum></a> )
<a class="production" data-link-type="function" href="#funcdef-cos" id="ref-for-funcdef-cos③">&lt;cos()></a>   = cos( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum⑥">&lt;calc-sum></a> )
<a class="production" data-link-type="function" href="#funcdef-tan" id="ref-for-funcdef-tan③">&lt;tan()></a>   = tan( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum⑦">&lt;calc-sum></a> )
<a class="production" data-link-type="function" href="#funcdef-asin" id="ref-for-funcdef-asin③">&lt;asin()></a>  = asin( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum⑧">&lt;calc-sum></a> )
<a class="production" data-link-type="function" href="#funcdef-acos" id="ref-for-funcdef-acos③">&lt;acos()></a>  = acos( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum⑨">&lt;calc-sum></a> )
<a class="production" data-link-type="function" href="#funcdef-atan" id="ref-for-funcdef-atan③">&lt;atan()></a>  = atan( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①⓪">&lt;calc-sum></a> )
<a class="production" data-link-type="function" href="#funcdef-atan2" id="ref-for-funcdef-atan2②">&lt;atan2()></a> = atan2( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①①">&lt;calc-sum></a><a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma③">,</a> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①②">&lt;calc-sum></a> )
<a class="production" data-link-type="function" href="#funcdef-pow" id="ref-for-funcdef-pow④">&lt;pow()></a>   = pow( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①③">&lt;calc-sum></a><a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma④">,</a> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①④">&lt;calc-sum></a> )
<a class="production" data-link-type="function" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt④">&lt;sqrt()></a>  = sqrt( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑤">&lt;calc-sum></a> )
<a class="production" data-link-type="function" href="#funcdef-hypot" id="ref-for-funcdef-hypot⑥">&lt;hypot()></a> = hypot( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑥">&lt;calc-sum></a><a data-link-type="grammar" href="#mult-comma" id="ref-for-mult-comma③">#</a> )
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-calc-sum">&lt;calc-sum></dfn> = <a class="production" data-link-type="type" href="#typedef-calc-product" id="ref-for-typedef-calc-product">&lt;calc-product></a> [ [ '+' <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②⑨">|</a> '-' ] <a class="production" data-link-type="type" href="#typedef-calc-product" id="ref-for-typedef-calc-product①">&lt;calc-product></a> ]<a data-link-type="grammar" href="#mult-zero-plus" id="ref-for-mult-zero-plus①">*</a>
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-calc-product">&lt;calc-product></dfn> = <a class="production" data-link-type="type" href="#typedef-calc-value" id="ref-for-typedef-calc-value">&lt;calc-value></a> [ [ '*' <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③⓪">|</a> '/' ] <a class="production" data-link-type="type" href="#typedef-calc-value" id="ref-for-typedef-calc-value①">&lt;calc-value></a> ]<a data-link-type="grammar" href="#mult-zero-plus" id="ref-for-mult-zero-plus②">*</a>
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-calc-value">&lt;calc-value></dfn> = <a class="production" data-link-type="type" href="#number-value" id="ref-for-number-value②⑤">&lt;number></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③①">|</a> <a class="production" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension④">&lt;dimension></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③②">|</a> <a class="production" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②⑦">&lt;percentage></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③③">|</a> ( <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑦">&lt;calc-sum></a> )
</pre>
   <p>In addition, <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#whitespace" id="ref-for-whitespace">whitespace</a> is required on both sides of the <span class="css">+</span> and <span class="css">-</span> operators.
	(The <span class="css">*</span> and <span class="css">/</span> operaters can be used without white space around them.)</p>
   <p>Several of the math functions above have additional constraints
	on what their <a class="production css" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑧">&lt;calc-sum></a> arguments can contain.
	Check the definitions of the individual functions for details.</p>
   <p>UAs must support <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①④">calculations</a> of at least 20 <a class="production css" data-link-type="type" href="#typedef-calc-value" id="ref-for-typedef-calc-value②">&lt;calc-value></a> terms.
	If a <span id="ref-for-calc-calculation①⑤">calculation</span> contains more than the supported number of terms,
	it must be treated as if it were invalid.</p>
   <h3 class="heading settled" data-level="11.6" id="calc-type-checking"><span class="secno">11.6. </span><span class="content"> Type Checking</span><a class="self-link" href="#calc-type-checking"></a></h3>
   <p>A <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①③">math function</a> can be many possible types,
	such as <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②④" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>, <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②⑥">&lt;number></a>, etc.,
	depending on the <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①⑥">calculations</a> it contains,
	as defined below.
	It can be used anywhere a value of that type is allowed.</p>
   <div class="example" id="example-40312766"><a class="self-link" href="#example-40312766"></a> For example, the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width⑨">width</a> property accepts <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②⑤" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> values,
		so a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①④">math function</a> that resolves to a <span class="production" id="ref-for-length-value②⑥" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></span>,
		such as <span class="css">calc(5px + 1em)</span>,
		can be used in <span class="property" id="ref-for-propdef-width①⓪">width</span>. </div>
   <p>Additionally, <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①⑤">math functions</a> that resolve to <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②⑦">&lt;number></a> can be used in any place that only accepts <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①⓪">&lt;integer></a>.
	(It gets rounded to the nearest integer,
	as specified in <a href="#calc-range">§ 11.9 Range Checking</a>.)</p>
   <p>Operators form sub-expressions, which gain types based on their arguments.</p>
   <p class="note" role="note"><span>Note:</span> In previous versions of this specification,
	multiplication and division were limited in what arguments they could take,
	to avoid producing more complex intermediate results
	(such as <span class="css">1px * 1em</span>, which is <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②⑦" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>²)
	and to make division-by-zero detectable at parse time.
	This version now relaxes those restrictions.</p>
   <div class="algorithm" data-algorithm="determine the type of a calculation">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="determine-the-type-of-a-calculation">determine the type of a <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①⑦">calculation</a></dfn>: 
    <ul>
     <li data-md>
      <p>At a <span class="css">+</span> or <span class="css">-</span> sub-expression,
attempt to <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-add-two-types" id="ref-for-cssnumericvalue-add-two-types">add the types</a> of the left and right arguments.
If this returns failure,
the entire <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①⑧">calculation’s</a> type is failure.
Otherwise, the sub-expression’s <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type③">type</a> is the returned type.</p>
     <li data-md>
      <p>At a <span class="css">*</span> sub-expression, <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types" id="ref-for-cssnumericvalue-multiply-two-types">multiply the types</a> of the left and right arguments.
The sub-expression’s <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type④">type</a> is the returned result.</p>
     <li data-md>
      <p>At a <span class="css">/</span> sub-expression,
let <var>left type</var> be the result of finding the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type⑤">types</a> of its left argument,
and <var>right type</var> be the result of finding the <span id="ref-for-cssnumericvalue-type⑥">types</span> of its right argument
and then <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-invert-a-type" id="ref-for-cssnumericvalue-invert-a-type">inverting</a> it.</p>
      <p>The sub-expression’s <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type⑦">type</a> is the result of <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types" id="ref-for-cssnumericvalue-multiply-two-types①">multiplying</a> the <var>left type</var> and <var>right type</var>.</p>
     <li data-md>
      <p>Anything else is a terminal value,
whose <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type⑧">type</a> is determined based on its CSS type:</p>
      <dl class="switch">
       <dt data-md><a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②⑧">&lt;number></a>
       <dt data-md><a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①①">&lt;integer></a>
       <dd data-md>
        <p>the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type⑨">type</a> is «[ ]» (empty map)</p>
       <dt data-md><a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②⑧" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>
       <dd data-md>
        <p>the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①⓪">type</a> is «[ "length" → 1 ]»</p>
       <dt data-md><a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①④" title="Expands to: turn | rad | grad | deg">&lt;angle></a>
       <dd data-md>
        <p>the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①①">type</a> is «[ "angle" → 1 ]»</p>
       <dt data-md><a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value⑨" title="Expands to: s | ms">&lt;time></a>
       <dd data-md>
        <p>the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①②">type</a> is «[ "time" → 1 ]»</p>
       <dt data-md><a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value⑨" title="Expands to: hz | khz">&lt;frequency></a>
       <dd data-md>
        <p>the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①③">type</a> is «[ "frequency" → 1 ]»</p>
       <dt data-md><a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value⑥" title="Expands to: dppx | x | dpcm | dpi">&lt;resolution></a>
       <dd data-md>
        <p>the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①④">type</a> is «[ "resolution" → 1 ]»</p>
       <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-grid-1/#typedef-flex" id="ref-for-typedef-flex②" title="Expands to: fr">&lt;flex></a>
       <dd data-md>
        <p>the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①⑤">type</a> is «[ "flex" → 1 ]»</p>
       <dt data-md><a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②⑧">&lt;percentage></a>
       <dd data-md>
        <p>If, in the context in which the <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①⑥">math function</a> containing this <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①⑨">calculation</a> is placed, <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②⑨">&lt;percentage></a>s are resolved relative to another type of value
(such as in <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①①">width</a>, where <span class="production" id="ref-for-percentage-value③⓪">&lt;percentage></span> is resolved against a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②⑨" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>),
and that other type is <em>not</em> <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②⑨">&lt;number></a>,
the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①⑥">type</a> is determined as the other type.</p>
        <p>Otherwise,
the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①⑦">type</a> is «[ "percent" → 1 ]».</p>
       <dt data-md>anything else
       <dd data-md>
        <p>The <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②⓪">calculation’s</a> type is failure.</p>
      </dl>
      <p>In all cases, the associated <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-percent-hint" id="ref-for-cssnumericvalue-percent-hint">percent hint</a> is null.</p>
    </ul>
   </div>
   <p><a data-link-type="dfn" href="#math-function" id="ref-for-math-function①⑦">Math functions</a> themselves have <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①⑧">types</a>,
	according to their contained <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②①">calculations</a>:</p>
   <ul>
    <li data-md>
     <p>The <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①⑨">type</a> of a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①④">calc()</a> expression
is the <span id="ref-for-cssnumericvalue-type②⓪">type</span> of its contained <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②②">calculation</a>.</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②①">type</a> of a <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min⑧">min()</a>, <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max⑧">max()</a>, or <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp⑨">clamp()</a> expression
is the result of <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-add-two-types" id="ref-for-cssnumericvalue-add-two-types①">adding the types</a> of its comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②③">calculations</a>.</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②②">type</a> of a <a class="css" data-link-type="maybe" href="#funcdef-sin" id="ref-for-funcdef-sin⑤">sin()</a>, <a class="css" data-link-type="maybe" href="#funcdef-cos" id="ref-for-funcdef-cos④">cos()</a>, or <a class="css" data-link-type="maybe" href="#funcdef-tan" id="ref-for-funcdef-tan④">tan()</a> expression
is «[ "number" → 1 ]».</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②③">type</a> of an <a class="css" data-link-type="maybe" href="#funcdef-asin" id="ref-for-funcdef-asin④">asin()</a>, <a class="css" data-link-type="maybe" href="#funcdef-acos" id="ref-for-funcdef-acos④">acos()</a>, <a class="css" data-link-type="maybe" href="#funcdef-atan" id="ref-for-funcdef-atan④">atan()</a>, or <a class="css" data-link-type="maybe" href="#funcdef-atan2" id="ref-for-funcdef-atan2③">atan2()</a> expression
is «[ "angle" → 1 ]».</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②④">type</a> of a <a class="css" data-link-type="maybe" href="#funcdef-pow" id="ref-for-funcdef-pow⑤">pow()</a> or <a class="css" data-link-type="maybe" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt⑤">sqrt()</a> expression
is «[ "number" → 1 ]».</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②⑤">type</a> of a <a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot⑦">hypot()</a> expression
is the result of <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-add-two-types" id="ref-for-cssnumericvalue-add-two-types②">adding the types</a> of its comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②④">calculations</a>.</p>
   </ul>
   <p>For each of the above,
	if the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②⑥">type</a> is failure,
	the <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①⑧">math function</a> is invalid.</p>
   <p>A <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①⑨">math function</a> resolves to <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③⓪">&lt;number></a>, <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③⓪" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>, <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①⑤" title="Expands to: turn | rad | grad | deg">&lt;angle></a>, <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value①⓪" title="Expands to: s | ms">&lt;time></a>, <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value①⓪" title="Expands to: hz | khz">&lt;frequency></a>, <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value⑦" title="Expands to: dppx | x | dpcm | dpi">&lt;resolution></a>, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-grid-1/#typedef-flex" id="ref-for-typedef-flex③" title="Expands to: fr">&lt;flex></a>, or <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value③①">&lt;percentage></a> according to which of those productions its <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②⑦">type</a> <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match" id="ref-for-cssnumericvalue-match②">matches</a>.
	(These categories are mutually exclusive.)
	If it can’t <span id="ref-for-cssnumericvalue-match③">match</span> any of these,
	the <span id="ref-for-math-function②⓪">math function</span> is invalid.</p>
   <p>Division by zero is possible,
	which introduces certain complications. <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②①">Math functions</a> follow IEEE-754 semantics for these operations:</p>
   <ul>
    <li data-md>
     <p>Dividing a positive value by zero produces +∞.</p>
    <li data-md>
     <p>Dividing a negative value by zero produces −∞.</p>
    <li data-md>
     <p>Adding or subtracting ±∞ to anything produces the appropriate infinity,
unless a following rule would define it as producing NaN.</p>
    <li data-md>
     <p>Multiplying any value by ±∞ produces the appropriate infinity,
unless a following rule would define it as producing NaN.</p>
    <li data-md>
     <p>Dividing any value by ±∞ produces zero,
unless a following rule would define it as producing NaN.</p>
    <li data-md>
     <p>Dividing zero by zero,
dividing ±∞ by ±∞,
multiplying 0 by ±∞,
adding +∞ to −∞
(or the equivalent subtractions)
produces NaN.</p>
    <li data-md>
     <p>Any operation with at least one NaN argument produces NaN.</p>
   </ul>
   <p>Additionally,
	IEEE-754 introduces the concept of "negative zero",
	which must be tracked within a calculation
	and between nested calculations:</p>
   <ul>
    <li data-md>
     <p>Negative zero
(0⁻)
can be produced literally by negating a zero
(<span class="css">-0</span>),
or by a multiplication or division that produces zero
with exactly one negative argument
(such as <span class="css">-5 * 0</span> or <span class="css">1 / (-1 / 0)</span>).</p>
     <p class="note" role="note"><span>Note:</span> Note that,
outside of <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②②">math functions</a>, <span class="css">-0</span> just produces a "standard" zero,
identical to <span class="css">0</span>—<wbr>CSS as a whole doesn’t recognize the concept of signed zeros.
Negative zeros also don’t escape a <span id="ref-for-math-function②③">math function</span>;
as detailed below,
they’re "censored" away into an "unsigned" zero.</p>
    <li data-md>
     <p><span class="css">-0 + -0</span> or <span class="css">-0 - 0</span> produces 0⁻.
All other additions or subtractions that would produce a zero
produce 0⁺.</p>
    <li data-md>
     <p>Multiplying or dividing 0⁻ with a positive number
(including 0⁺)
produces a negative result
(either 0⁻ or −∞),
while multiplying or dividing 0⁻ with a negative number
produces a positive result.</p>
     <p>(In other words,
multiplying or dividing with 0⁻
follows standard sign rules.)</p>
    <li data-md>
     <p>When comparing 0⁺ and 0⁻,
0⁻ is less than 0⁺.
For example, <span class="css">min(0, -0)</span> must produce 0⁻, <span class="css">max(0, -0)</span> must produce 0⁺,
and <span class="css">clamp(0, -0, 1)</span> must produce 0⁺.</p>
   </ul>
   <p>If a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="top-level-calculation">top-level calculation</dfn> (a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②④">math function</a> not nested inside of another <span id="ref-for-math-function②⑤">math function</span>)
	would produce a NaN,
	it instead produces +∞.
	If a <a data-link-type="dfn" href="#top-level-calculation" id="ref-for-top-level-calculation">top-level calculation</a> would produce 0⁻,
	it instead produces the standard "unsigned" zero.</p>
   <div class="example" id="example-40b6820d">
    <a class="self-link" href="#example-40b6820d"></a> For example, <span class="css">calc(-5 * 0)</span> produces an unsigned zero—<wbr>the calculation resolves to 0⁻,
		but as it’s a <a data-link-type="dfn" href="#top-level-calculation" id="ref-for-top-level-calculation①">top-level calculation</a>,
		it’s then censored to an unsigned zero. 
    <p>On the other hand, <span class="css">calc(1 / calc(-5 * 0))</span> produces −∞,
		same as <span class="css">calc(1 / (-5 * 0))</span>—<wbr>the inner calc resolves to 0⁻,
		and as it’s not a <a data-link-type="dfn" href="#top-level-calculation" id="ref-for-top-level-calculation②">top-level calculation</a>,
		it passes it up unchanged to the outer calc to produce −∞.
		If it was censored into an unsigned zero,
		it would instead produce +∞.</p>
   </div>
   <p class="note" role="note"><span>Note:</span> Algebraic simplifications do not affect the validity of a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②⑥">math function</a> or its resolved type.
	For example, <span class="css">calc(5px - 5px + 10s)</span> and <span class="css">calc(0 * 5px + 10s)</span> are both invalid
	due to the attempt to add a length and a time.</p>
   <p class="note" role="note"><span>Note:</span> Note that <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value③②">&lt;percentage></a>s relative to <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③①">&lt;number></a>s,
	such as in <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity">opacity</a>,
	are not <em>combinable</em> with those numbers—<wbr><span class="css" id="ref-for-propdef-opacity①">opacity: calc(.25 + 25%)</span> is invalid.
	Allowing this causes significant problems with "unit algebra"
	(allowing multiplication/division of <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension⑤">&lt;dimension></a>s),
	and in every case so far,
	doesn’t provide any new functionality.
	(For example, <span class="css" id="ref-for-propdef-opacity②">opacity: 25%</span> is identical to <span class="css" id="ref-for-propdef-opacity③">opacity: .25</span>;
	it’s just a trivial syntax transform.)
	You can still perform other operations with them,
	such as <span class="css" id="ref-for-propdef-opacity④">opacity: calc(100% / 3);</span>,
	which is valid.</p>
   <p class="note" role="note"><span>Note:</span> Because <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token⑤">&lt;number-token></a>s are always interpreted as <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③②">&lt;number></a>s or <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①②">&lt;integer></a>s,
	"unitless 0" <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③①" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>s aren’t supported in <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②⑦">math functions</a>.
	That is, <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①②">width: calc(0 + 5px);</a> is invalid,
	because it’s trying to add a <span class="production" id="ref-for-number-value③③">&lt;number></span> to a <span class="production" id="ref-for-length-value③②" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></span>,
	even though both <span class="css" id="ref-for-propdef-width①③">width: 0;</span> and <span class="css" id="ref-for-propdef-width①④">width: 5px;</span> are valid.</p>
   <p class="note" role="note"><span>Note:</span> Altho there are a few properties in which a bare <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③④">&lt;number></a> becomes a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③③" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> at used-value time
	(specifically, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height⑨">line-height</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-tab-size" id="ref-for-propdef-tab-size">tab-size</a>), <span class="production" id="ref-for-number-value③⑤">&lt;number></span>s never become "length-like" in <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①⑤">calc()</a>.
	They always stay as <span class="production" id="ref-for-number-value③⑥">&lt;number></span>s.</p>
   <h3 class="heading settled" data-level="11.7" id="calc-internal"><span class="secno">11.7. </span><span class="content"> Internal Representation</span><a class="self-link" href="#calc-internal"></a></h3>
   <p>The <a data-link-type="dfn">internal representation</a> of a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②⑧">math function</a> is a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="calculation-tree">calculation tree</dfn>:
	a tree where the branch nodes are <dfn class="dfn-paneled" data-dfn-for="calculation tree" data-dfn-type="dfn" data-export id="calculation-tree-operator-nodes">operator nodes</dfn> corresponding either to <span id="ref-for-math-function②⑨">math functions</span> (such as Min, Cos, Sqrt, etc)
	or to operators in a <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②⑤">calculation</a> (Sum, Product, Negate, and Invert, the <dfn class="dfn-paneled" data-dfn-for="calculation tree" data-dfn-type="dfn" data-noexport id="calculation-tree-calc-operator-nodes">calc-operator nodes</dfn>),
	and the leaf nodes
	are either numeric values
	(such as numbers, dimensions, and percentages)
	or non-<span id="ref-for-math-function③⓪">math functions</span> that resolve to a numeric type.</p>
   <p><a data-link-type="dfn" href="#math-function" id="ref-for-math-function③①">Math functions</a> are turned into <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree">calculation trees</a> depending on the function:</p>
   <dl class="switch">
    <dt data-md>calc()
    <dd data-md>
     <p>The <a data-link-type="dfn">internal representation</a> of a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①⑥">calc()</a> function
is the result of <a data-link-type="dfn" href="#parse-a-calculation" id="ref-for-parse-a-calculation">parsing a calculation</a> from its argument.</p>
    <dt data-md>any other <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③②">math function</a>
    <dd data-md>
     <p>The <a data-link-type="dfn">internal representation</a> is an <a data-link-type="dfn" href="#calculation-tree-operator-nodes" id="ref-for-calculation-tree-operator-nodes">operator node</a> with the same name as the function,
whose children are the result of <a data-link-type="dfn" href="#parse-a-calculation" id="ref-for-parse-a-calculation①">parsing a calculation</a> from each of the function’s arguments,
in the order they appear.</p>
   </dl>
   <div class="algorithm" data-algorithm="parse a calculation">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="parse a calculation|parsing a calculation" id="parse-a-calculation">parse a calculation</dfn>,
		given a <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②⑥">calculation</a> <var>values</var> represented as a list of <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#component-value" id="ref-for-component-value②">component values</a>,
		and returning a <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree①">calculation tree</a>: 
    <ol>
     <li data-md>
      <p>Discard any <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-whitespace-token" id="ref-for-typedef-whitespace-token">&lt;whitespace-token></a>s from <var>values</var>.</p>
     <li data-md>
      <p>An item in <var>values</var> is an “operator”
if it’s a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-delim-token" id="ref-for-typedef-delim-token①">&lt;delim-token></a> with the value "+", "-", "*", or "/".
Otherwise, it’s a “value”.</p>
     <li data-md>
      <p>Collect children into Product and Invert nodes.</p>
      <p>For every consecutive run of value items in <var>values</var> separated by "*" or "/" operators:</p>
      <ol>
       <li data-md>
        <p>For each "/" operator in the run,
replace its right-hand value item <var>rhs</var> with an Invert node containing <var>rhs</var> as its child.</p>
       <li data-md>
        <p>Replace the entire run with a Product node
containing the value items of the run as its children.</p>
      </ol>
     <li data-md>
      <p>Collect children into Sum and Negate nodes.</p>
      <ol>
       <li data-md>
        <p>For each "-" operator item in <var>values</var>,
replace its right-hand value item <var>rhs</var> with a Negate node containing <var>rhs</var> as its child.</p>
       <li data-md>
        <p>If <var>values</var> has only one item,
and it is a Product node
or a parenthesized <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#simple-block" id="ref-for-simple-block">simple block</a>,
replace <var>values</var> with that item.</p>
        <p>Otherwise,
replace <var>values</var> with a Sum node
containing the value items of <var>values</var> as its children.</p>
      </ol>
     <li data-md>
      <p>At this point <var>values</var> is
a tree of Sum, Product, Negate, and Invert nodes,
with other types of values at the leaf nodes.
Process the leaf nodes.</p>
      <p>For every leaf node <var>leaf</var> in <var>values</var>:</p>
      <ol>
       <li data-md>
        <p>If <var>leaf</var> is a parenthesized <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#simple-block" id="ref-for-simple-block①">simple block</a>,
replace <var>leaf</var> with the result of <a data-link-type="dfn" href="#parse-a-calculation" id="ref-for-parse-a-calculation②">parsing a calculation</a> from <var>leaf</var>’s contents.</p>
       <li data-md>
        <p>If <var>leaf</var> is a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③③">math function</a>,
replace <var>leaf</var> with the <a data-link-type="dfn">internal representation</a> of that math function.</p>
      </ol>
     <li data-md>
      <p>Return the result of <a data-link-type="dfn" href="#simplify-a-calculation-tree" id="ref-for-simplify-a-calculation-tree">simplifying a calculation tree</a> from <var>values</var>.</p>
    </ol>
   </div>
   <h4 class="heading settled" data-level="11.7.1" id="calc-simplification"><span class="secno">11.7.1. </span><span class="content"> Simplification</span><a class="self-link" href="#calc-simplification"></a></h4>
   <p><a data-link-type="dfn">Internal representations</a> of <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③④">math functions</a> are eagerly simplified to the extent possible,
	using standard algebraic simplifications
	(distributing multiplication over sums,
	combining similar units,
	etc.).</p>
   <div class="algorithm" data-algorithm="simplify a calculation tree">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="simplify" data-lt="simplify a calculation tree|simplifying a calculation tree" id="simplify-a-calculation-tree">simplify a calculation tree</dfn> <var>root</var>: 
    <ol>
     <li data-md>
      <p>If <var>root</var> is a numeric value:</p>
      <ol>
       <li data-md>
        <p>If <var>root</var> is a percentage that will be resolved against another value,
and there is enough information available to resolve it,
do so,
and express the resulting numeric value
in the appropriate <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit⑧">canonical unit</a>.
Return the value.</p>
       <li data-md>
        <p>If <var>root</var> is a dimension
that is not expressed in its <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit⑨">canonical unit</a>,
and there is enough information available to convert it to the <span id="ref-for-canonical-unit①⓪">canonical unit</span>,
do so,
and return the value.</p>
       <li data-md>
        <p>Otherwise, return <var>root</var>.</p>
      </ol>
     <li data-md>
      <p>If <var>root</var> is any other leaf node
(not an operator node):</p>
      <ol>
       <li data-md>
        <p>If there is enough information available to determine its numeric value,
return its value,
expressed in the value’s <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit①①">canonical unit</a>.</p>
       <li data-md>
        <p>Otherwise, return <var>root</var>.</p>
      </ol>
     <li data-md>
      <p>At this point, <var>root</var> is an <a data-link-type="dfn" href="#calculation-tree-operator-nodes" id="ref-for-calculation-tree-operator-nodes①">operator node</a>. <a data-link-type="dfn" href="#simplify-a-calculation-tree" id="ref-for-simplify-a-calculation-tree①">Simplify</a> all the children of <var>root</var>.</p>
     <li data-md>
      <p>If <var>root</var> is an <a data-link-type="dfn" href="#calculation-tree-operator-nodes" id="ref-for-calculation-tree-operator-nodes②">operator node</a> that’s not one of the <a data-link-type="dfn" href="#calculation-tree-calc-operator-nodes" id="ref-for-calculation-tree-calc-operator-nodes">calc-operator nodes</a>,
and all of its children are numeric values
with enough information to computed the operation <var>root</var> represents,
return the result of running <var>root</var>’s operation
using its children,
expressed in the result’s <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit①②">canonical unit</a>.</p>
     <li data-md>
      <p>If <var>root</var> is a Negate node:</p>
      <ol>
       <li data-md>
        <p>If <var>root</var>’s child is a numeric value,
return an equivalent numeric value,
but with the value negated
(0 - value).</p>
       <li data-md>
        <p>If <var>root</var>’s child is a Negate node,
return the child’s child.</p>
       <li data-md>
        <p>Return <var>root</var>.</p>
      </ol>
     <li data-md>
      <p>If <var>root</var> is an Invert node:</p>
      <ol>
       <li data-md>
        <p>If <var>root</var>’s child is a number
(not a percentage or dimension)
return the reciprocal of the child’s value.</p>
       <li data-md>
        <p>If <var>root</var>’s child is an Invert node,
return the child’s child.</p>
       <li data-md>
        <p>Return <var>root</var>.</p>
      </ol>
     <li data-md>
      <p>If <var>root</var> is a Sum node:</p>
      <ol>
       <li data-md>
        <p>For each of <var>root</var>’s children
that are Sum nodes,
replace them with their children.</p>
       <li data-md>
        <p>For each set of <var>root</var>’s children
that are numeric values with identical units,
remove those children
and replace them with a single numeric value
containing the sum of the removed nodes,
and with the same unit.</p>
        <p>(E.g. combine numbers, combine percentages,
combine px values, etc.)</p>
       <li data-md>
        <p>If <var>root</var> has only a single child at this point,
return the child.
Otherwise, return <var>root</var>.</p>
      </ol>
     <li data-md>
      <p>If <var>root</var> is a Product node:</p>
      <ol>
       <li data-md>
        <p>For each of <var>root</var>’s children
that are Product nodes,
replace them with their children.</p>
       <li data-md>
        <p>If <var>root</var> has multiple children that are numbers
(not percentages or dimensions),
remove them and replace them with a single number
containing the product of the removed nodes.</p>
       <li data-md>
        <p>If <var>root</var> contains only two children,
one of which is a number
(not a percentage or dimension)
and the other of which is a Sum
whose children are all numeric values,
multiply all of the Sum’s children by the number,
then return the Sum.</p>
       <li data-md>
        <p>If <var>root</var> contains only numeric values
and/or Invert nodes containing numeric values,
and <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types" id="ref-for-cssnumericvalue-multiply-two-types②">multiplying the types</a> of all the children
(noting that the type of an Invert node
is the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-invert-a-type" id="ref-for-cssnumericvalue-invert-a-type①">inverse</a> of its child’s type)
results in a type that <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match" id="ref-for-cssnumericvalue-match④">matches</a> any of the types that a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③⑤">math function</a> can resolve to,
return the result of multiplying all the values of the children
(noting that the value of an Invert node
is the reciprocal of its child’s value),
expressed in the result’s <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit①③">canonical unit</a>.</p>
       <li data-md>
        <p>Return <var>root</var>.</p>
      </ol>
    </ol>
   </div>
   <h3 class="heading settled" data-level="11.8" id="calc-computed-value"><span class="secno">11.8. </span><span class="content"> Computed Value</span><a class="self-link" href="#calc-computed-value"></a></h3>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑦">computed value</a> of a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③⑥">math function</a> is its <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree②">calculation tree</a> <a data-link-type="dfn" href="#simplify-a-calculation-tree" id="ref-for-simplify-a-calculation-tree②">simplified</a>,
	using all the information available at <span id="ref-for-computed-value⑧">computed value</span> time.
	(Such as the <a class="css" data-link-type="maybe" href="#em" id="ref-for-em③">em</a> to <a class="css" data-link-type="maybe" href="#px" id="ref-for-px①①">px</a> ratio,
	how to resolve percentages in some properties,
	etc.)</p>
   <p>Where percentages are not resolved at computed-value time,
	they are not resolved in <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③⑦">math functions</a>,
	e.g. <span class="css">calc(100% - 100% + 1px)</span> resolves to <span class="css">calc(0% + 1px)</span>,
	not to <span class="css">1px</span>.
	If there are special rules for computing percentages in a value
	(e.g. <a href="https://www.w3.org/TR/CSS21/visudet.html#the-height-property">the <span class="css">height</span> property</a>),
	they apply whenever a <span id="ref-for-math-function③⑧">math function</span> contains percentages.</p>
   <p>The <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree③">calculation tree</a> is again simplified at <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value③">used value</a> time;
	with <span id="ref-for-used-value④">used value</span> time information,
	a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③⑨">math function</a> always simplifies down to a single numeric value.</p>
   <div class="example" id="example-023dad93">
    <a class="self-link" href="#example-023dad93"></a> For example,
		whereas <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size⑧">font-size</a> computes percentage values at <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑨">computed value</a> time
		so that <a data-link-type="dfn" href="#font-relative-length" id="ref-for-font-relative-length">font-relative length</a> units can be computed, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position⑤">background-position</a> has layout-dependent behavior for percentage values,
		and thus does not resolve percentages until used-value time. 
    <p>Due to this, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position⑥">background-position</a> computation preserves the percentage in a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①⑦">calc()</a> whereas <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size⑨">font-size</a> will compute such expressions directly into a length.</p>
   </div>
   <p>Given the complexities of width and height calculations on table cells and table elements,
	math expressions mixing both percentages and lengths for widths and heights on
	table columns, table column groups, table rows, table row groups, and table cells
	in both auto and fixed layout tables
	MUST be treated as if <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto">auto</a> had been specified.</p>
   <h3 class="heading settled" data-level="11.9" id="calc-range"><span class="secno">11.9. </span><span class="content"> Range Checking</span><a class="self-link" href="#calc-range"></a></h3>
   <p>Parse-time range-checking of values is not performed within <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④⓪">math functions</a>,
	and therefore out-of-range values do not cause the declaration to become invalid.
	However, the value resulting from an expression
	must be clamped to the range allowed in the target context.
	Clamping is performed on <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①⓪">computed values</a> to the extent possible,
	and also on <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value⑤">used values</a> if computation was unable to sufficiently simplify the expression
	to allow range-checking.
	(Clamping is not performed on <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#specified-value" id="ref-for-specified-value②">specified values</a>.)</p>
   <p class="note" role="note"><span>Note:</span> This requires all contexts accepting <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①⑧">calc()</a> to define their allowable values as a closed (not open) interval.</p>
   <p class="note" role="note"><span>Note:</span> By definition,
	±∞ are outside the allowed range for any property,
	and will clamp to the minimum/maximum value allowed.
	Even for properties that explicitly allow <span class="css">infinity</span> as a keyword value,
	such as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-iteration-count" id="ref-for-propdef-animation-iteration-count">animation-iteration-count</a>,
	will end up clamping ±∞,
	as <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④①">math functions</a> can’t resolve to keyword values;
	the <em>numeric</em> part of the property’s syntax still has a minimum/maximum value.</p>
   <p>Additionally, if a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④②">math function</a> that resolves to <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③⑦">&lt;number></a> is used somewhere that only accepts <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①③">&lt;integer></a>,
	the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①①">computed value</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value⑥">used value</a> are rounded to the nearest integer,
	in the same manner as clamping, above.
	The rounding method must be the same as is used for animations of integer values.</p>
   <div class="example" id="example-ec14dee2">
    <a class="self-link" href="#example-ec14dee2"></a> Since widths smaller than 0px are not allowed,
		these three declarations are equivalent: 
<pre>width: calc(5px - 10px);
width: calc(-5px);
width: 0px;
</pre>
    <p>Note however that <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①⑤">width: -5px</a> is not equivalent to <span class="css" id="ref-for-propdef-width①⑥">width: calc(-5px)</span>!
		Out-of-range values <em>outside</em> <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①⑨">calc()</a> are syntactically invalid,
		and cause the entire declaration to be dropped.</p>
   </div>
   <h3 class="heading settled" data-level="11.10" id="calc-serialize"><span class="secno">11.10. </span><span class="content"> Serialization</span><a class="self-link" href="#calc-serialize"></a></h3>
   <p class="issue" id="issue-f5bc4b00"><a class="self-link" href="#issue-f5bc4b00"></a> This section is still <a href="https://lists.w3.org/Archives/Member/w3c-css-wg/2016AprJun/0239.html">under discussion</a>.</p>
   <div class="algorithm" data-algorithm="serialize a math function">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="serialize-a-math-function">serialize a math function</dfn> <var>fn</var>: 
    <ol>
     <li data-md>
      <p>If the root of the <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree④">calculation tree</a> <var>fn</var> represents
is a numeric value
(number, percentage, or dimension),
and the serialization being produced is of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①②">computed value</a> or later,
then clamp the value to the range allowed for its context
(if necessary),
then serialize the value as normal
and return the result.</p>
     <li data-md>
      <p>If <var>fn</var> represents an infinite or NaN value:</p>
      <ol>
       <li data-md>
        <p>Let <var>s</var> be the <a data-link-type="dfn" href="#string" id="ref-for-string">string</a> "calc(".</p>
       <li data-md>
        <p>Create a numeric value
in the <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit①④">canonical unit</a> for <var>fn</var>’s <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②⑧">type</a> (such as <a class="css" data-link-type="maybe" href="#px" id="ref-for-px①②">px</a> for <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③④" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>),
with a value of 1 if <var>fn</var> represents +∞,
a value of -1 if <var>fn</var> represents −∞,
or a value of 0 if <var>fn</var> represents NaN.
Serialize this numeric value
and append it to <var>s</var>.</p>
       <li data-md>
        <p>Append " / 0)" to <var>s</var>,
and return <var>s</var>.</p>
      </ol>
     <li data-md>
      <p>If the <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree⑤">calculation tree’s</a> root node is a numeric value,
or a <a data-link-type="dfn" href="#calculation-tree-calc-operator-nodes" id="ref-for-calculation-tree-calc-operator-nodes①">calc-operator node</a>,
let <var>s</var> be a string initially containing "calc(".</p>
      <p>Otherwise,
let <var>s</var> be a string initially containing the name of the root node,
lowercased
(such as "sin" or "max"),
followed by a "(" (open parenthesis).</p>
     <li data-md>
      <p>For each child of the root node, <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree">serialize the calculation tree</a>.
If a result of this serialization starts with a "(" (open parenthesis)
and ends with a ")" (close parenthesis),
remove those characters from the result. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string-concatenate" id="ref-for-string-concatenate">Concatenate</a> all of the results
using ", " (comma followed by space),
then append the result to <var>s</var>.</p>
     <li data-md>
      <p>Append ")" (close parenthesis) to <var>s</var>.</p>
     <li data-md>
      <p>Return <var>s</var>.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="serialize a calculation tree">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="serialize a calculation tree|serialize the calculation tree|serializing a calculation tree|serializing the calculation tree" id="serialize-a-calculation-tree">serialize a calculation tree</dfn>: 
    <ol>
     <li data-md>
      <p>Let <var>root</var> be the root node
of the <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree⑥">calculation tree</a>.</p>
     <li data-md>
      <p>If <var>root</var> is a numeric value,
or a non-<a data-link-type="dfn" href="#math-function" id="ref-for-math-function④③">math function</a>,
serialize <var>root</var> per the normal rules for it
and return the result.</p>
     <li data-md>
      <p>If <var>root</var> is anything but
a Sum,
Negate,
Product,
or Invert node, <a data-link-type="dfn" href="#serialize-a-math-function" id="ref-for-serialize-a-math-function">serialize a math function</a> for the function corresponding to the node type,
treating the node’s children as the function’s comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②⑦">calculation</a> arguments,
and return the result.</p>
     <li data-md>
      <p>If <var>root</var> is a Negate node,
let <var>s</var> be a <a data-link-type="dfn" href="#string" id="ref-for-string①">string</a> initially containing "(-1 * ".</p>
      <p><a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree①">Serialize</a> <var>root</var>’s child,
and append it to <var>s</var>.</p>
      <p>Append ")" to <var>s</var>,
then return it.</p>
     <li data-md>
      <p>If <var>root</var> is an Invert node,
let <var>s</var> be a <a data-link-type="dfn" href="#string" id="ref-for-string②">string</a> initially containing "(1 / ".</p>
      <p><a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree②">Serialize</a> <var>root</var>’s child,
and append it to <var>s</var>.</p>
      <p>Append ")" to <var>s</var>,
then return it.</p>
     <li data-md>
      <p>If <var>root</var> is a Sum node,
let <var>s</var> be a <a data-link-type="dfn" href="#string" id="ref-for-string③">string</a> initially containing "(".</p>
      <p><a data-link-type="dfn" href="#sort-a-calculations-children" id="ref-for-sort-a-calculations-children">Sort root’s children</a>.</p>
      <p><a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree③">Serialize</a> <var>root</var>’s first child,
and append it to <var>s</var>.</p>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate">For each</a> <var>child</var> of <var>root</var> beyond the first:</p>
      <ol>
       <li data-md>
        <p>If <var>child</var> is a Negate node,
append " - " to <var>s</var>,
then <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree④">serialize</a> the Negate’s child
and append the result to <var>s</var>.</p>
       <li data-md>
        <p>If <var>child</var> is a negative numeric value,
append " - " to <var>s</var>,
then serialize the negation of <var>child</var> as normal
and append the result to <var>s</var>.</p>
       <li data-md>
        <p>Otherwise,
append " + " to <var>s</var>,
then <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree⑤">serialize</a> <var>child</var> and append the result to <var>s</var>.</p>
      </ol>
      <p>Finally, append ")" to <var>s</var> and return it.</p>
     <li data-md>
      <p>If <var>root</var> is a Product node,
let <var>s</var> be a <a data-link-type="dfn" href="#string" id="ref-for-string④">string</a> initially containing "(".</p>
      <p><a data-link-type="dfn" href="#sort-a-calculations-children" id="ref-for-sort-a-calculations-children①">Sort root’s children</a>.</p>
      <p><a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree⑥">Serialize</a> <var>root</var>’s first child,
and append it to <var>s</var>.</p>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate①">For each</a> <var>child</var> of <var>root</var> beyond the first:</p>
      <ol>
       <li data-md>
        <p>If <var>child</var> is an Invert node,
append " / " to <var>s</var>,
then <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree⑦">serialize</a> the Invert’s child
and append the result to <var>s</var>.</p>
       <li data-md>
        <p>Otherwise,
append " * " to <var>s</var>,
then <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree⑧">serialize</a> <var>child</var> and append the result to <var>s</var>.</p>
      </ol>
      <p>Finally, append ")" to <var>s</var> and return it.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="sort a calculation’s children">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="sort-a-calculations-children">sort a calculation’s children</dfn> <var>nodes</var>: 
    <ol>
     <li data-md>
      <p>Let <var>ret</var> be an empty list.</p>
     <li data-md>
      <p>If <var>nodes</var> contains a number,
remove it from <var>nodes</var> and append it to <var>ret</var>.</p>
     <li data-md>
      <p>If <var>nodes</var> contains a percentage,
remove it from <var>nodes</var> and append it to <var>ret</var>.</p>
     <li data-md>
      <p>If <var>nodes</var> contains any dimensions,
remove them from <var>nodes</var>,
sort them by their units,
ordered <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive⑤">ASCII case-insensitively</a>,
and append them to <var>ret</var>.</p>
     <li data-md>
      <p>If <var>nodes</var> still contains any items,
append them to <var>ret</var> in the same order.</p>
     <li data-md>
      <p>Return <var>ret</var>.</p>
    </ol>
   </div>
   <div class="example" id="example-c3db2475">
    <a class="self-link" href="#example-c3db2475"></a> For example, <span class="css">calc(20px + 30px)</span> would serialize as <span class="css">calc(50px)</span> as a specified value,
		or as <span class="css">50px</span> as a computed value. 
    <p>A value like <span class="css">calc(20px + 0%)</span> would serialize as <span class="css">calc(0% + 20px)</span>,
		maintaining both terms in the serialized value.
		(It’s important to maintain zero-valued terms,
		so the <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②⓪">calc()</a> doesn’t suddenly "change shape" in the middle of a transition
		when one of the values happens to have a zero value temporarily.
		This also removes the need to "pick a unit" when all the terms are zero.)</p>
    <p>A value like <span class="css">calc(20px + 2em)</span> would serialize as <span class="css">calc(2em + 20px)</span> as a specified value
		(maintaining both units as they’re incompatible at specified-value time,
		but sorting them alphabetically),
		or as something like <span class="css">52px</span> as a computed value
		(<a class="css" data-link-type="maybe" href="#em" id="ref-for-em④">em</a> values are converted to absolute lengths at computed-value time,
		so assuming <span class="css">1em</span> = <span class="css">16px</span>,
		they combine into <span class="css">52px</span>,
		which then drops the <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②①">calc()</a> wrapper.)</p>
   </div>
   <p>See <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a> for further information on serialization.</p>
   <h3 class="heading settled" data-level="11.11" id="combine-math"><span class="secno">11.11. </span><span class="content"> Combination of Math Functions</span><a class="self-link" href="#combine-math"></a></h3>
   <p><a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation①④">Interpolation</a> of <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④④">math functions</a>,
	with each other
	or with numeric values and other numeric-valued functions,
	is defined as
	V<sub>result</sub> = calc((1 - p) * V<sub>a</sub> + p * V<sub>b</sub>).
	(<a data-link-type="dfn" href="#simplify-a-calculation-tree" id="ref-for-simplify-a-calculation-tree③">Simplification</a> of the value might then reduce the expression
	to a smaller, simpler form.)</p>
   <p><a data-link-type="dfn" href="#addition" id="ref-for-addition①⑦">Addition</a> of <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④⑤">math functions</a>,
	with each other
	or with numeric values and other numeric-valued functions,
	is defined as
	V<sub>result</sub> = calc(V<sub>a</sub> + V<sub>b</sub>).
	(<a data-link-type="dfn" href="#simplify-a-calculation-tree" id="ref-for-simplify-a-calculation-tree④">Simplification</a> of the value might then reduce the expression
	to a smaller, simpler form.)</p>
   <h2 class="heading settled" data-level="12" id="iana"><span class="secno">12. </span><span class="content"> Appendix A: IANA Considerations</span><a class="self-link" href="#iana"></a></h2>
   <h3 class="heading settled" data-level="12.1" id="about-invalid"><span class="secno">12.1. </span><span class="content"> Registration for the <code>about:invalid</code> URL scheme</span><a class="self-link" href="#about-invalid"></a></h3>
   <p>This sections defines and registers the <code>about:invalid</code> URL,
	in accordance with the registration procedure defined in <a data-link-type="biblio" href="#biblio-rfc6694">[RFC6694]</a>.</p>
   <p>The official record of this registration can be found at <a href="http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xhtml">http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xhtml</a>.</p>
   <table class="data longlastcol">
    <tbody>
     <tr>
      <th>Registered Token 
      <td><code>invalid</code> 
     <tr>
      <th>Intended Usage 
      <td> The <code>about:invalid</code> URL references a non-existent document with a generic error condition.
				It can be used when a URL is necessary, but the default value shouldn’t be resolveable as any type of document. 
     <tr>
      <th>Contact/Change controller 
      <td>CSS WG &lt;<a href="mailto:www-style@w3.org">www-style@w3.org</a>> (on behalf of W3C) 
     <tr>
      <th>Specification 
      <td><a href="https://www.w3.org/TR/css3-values/">CSS Values and Units Module Level 3</a> 
   </table>
   <h2 class="no-num heading settled" id="acknowledgments"><span class="content"> Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>Firstly, the editors would like to thank
	all of the contributors to the <a href="http://www.w3.org/TR/css-values-3/#acknowledgements">previous level</a> of this module.</p>
   <p>Secondly, we would like to acknowledge
	Koji Ishii
	and
	Xidorn Quan
	for their comments and suggestions,
	which have improved Level 4.</p>
   <h2 class="no-num heading settled" id="changes"><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2>
   <p>Changes since the <a href="https://www.w3.org/TR/2018/WD-css-values-4-20181010/">10 October 2018 Working Draft</a> consist of
	synchronizing with the <a href="https://www.w3.org/TR/2019/CR-css-values-3-20190131/#changes">recent changes in CSS Level 3</a>.</p>
   <p>Changes since the <a href="https://www.w3.org/TR/2018/WD-css-values-4-20180814/">14 August 2018 Working Draft</a>:</p>
   <ul>
    <li>Added rules for interpolation per value type, and clarified computed values. 
   </ul>
   <p>Changes since <a href="http://www.w3.org/TR/css-values-3/">Level 3</a>:</p>
   <ul>
    <li>Added the <a class="css" data-link-type="maybe" href="#valdef-length-vi" id="ref-for-valdef-length-vi③">vi</a>, <a class="css" data-link-type="maybe" href="#valdef-length-vb" id="ref-for-valdef-length-vb③">vb</a>, <a class="css" data-link-type="maybe" href="#ic" id="ref-for-ic②">ic</a>, <a class="css" data-link-type="maybe" href="#cap" id="ref-for-cap③">cap</a>, <a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh④">lh</a> and <a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh⑤">rlh</a> units. 
    <li>Added <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min⑨">min()</a>, <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max⑨">max()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp①⓪">clamp()</a> functional notations. 
    <li>Added unit arithmetic to <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②②">calc()</a>. 
    <li>Added <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle①⑦">toggle()</a> (punted from level 3 originally). 
    <li>Added <a href="#calc-type-checking">unit algebra</a>,
			cribbing from <a data-link-type="biblio" href="#biblio-css-typed-om-1">[css-typed-om-1]</a>. 
    <li>A non-integer in a calc() automatically rounds to the nearest integer
			when used where an <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①④">&lt;integer></a> is required. 
    <li>Defined <a href="#calc-serialize">serialization</a> of <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④⑥">math functions</a>. 
   </ul>
   <h2 class="no-num heading settled" id="sec-pri"><span class="content"> Security and Privacy Considerations</span><a class="self-link" href="#sec-pri"></a></h2>
   <p>This specification mostly just defines units that are common to CSS specifications,
	and which present no security concerns.</p>
   <p class="note" role="note"><span>Note:</span> Does URL handling have a security concern?  Probably.</p>
   <p>This specification defines units that expose the user’s screen size
	and default font size,
	but both are trivially observable from JS,
	so they do not constitutate a new privacy risk.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#comb-any">||</a><span>, in §2.2</span>
   <li><a href="#comb-comma">,</a><span>, in §2.1</span>
   <li><a href="#mult-comma">#</a><span>, in §2.3</span>
   <li><a href="#mult-one-plus">+</a><span>, in §2.3</span>
   <li><a href="#mult-opt">?</a><span>, in §2.3</span>
   <li><a href="#comb-all">&amp;&amp;</a><span>, in §2.2</span>
   <li><a href="#comb-one">|</a><span>, in §2.2</span>
   <li><a href="#mult-zero-plus">*</a><span>, in §2.3</span>
   <li><a href="#mult-req">!</a><span>, in §2.3</span>
   <li><a href="#mult-num">{A}</a><span>, in §2.3</span>
   <li><a href="#mult-num-range">{A,B}</a><span>, in §2.3</span>
   <li><a href="#absolute-length">absolute length</a><span>, in §6.2</span>
   <li><a href="#accumulation">accumulate</a><span>, in §3</span>
   <li><a href="#accumulation">accumulation</a><span>, in §3</span>
   <li><a href="#accumulation">accumulation procedure</a><span>, in §3</span>
   <li><a href="#funcdef-acos">acos()</a><span>, in §11.3</span>
   <li><a href="#addition">add</a><span>, in §3</span>
   <li><a href="#addition">addition</a><span>, in §3</span>
   <li><a href="#addition">addition procedure</a><span>, in §3</span>
   <li><a href="#length-advance-measure">advance measure</a><span>, in §6.1.1</span>
   <li><a href="#anchor-unit">anchor</a><span>, in §6.2</span>
   <li><a href="#anchor-unit">anchor unit</a><span>, in §6.2</span>
   <li><a href="#angle-value">&lt;angle></a><span>, in §7.1</span>
   <li><a href="#valdef-attr-angle">angle</a><span>, in §10.1</span>
   <li><a href="#typedef-angle-percentage">&lt;angle-percentage></a><span>, in §5.6</span>
   <li><a href="#funcdef-asin">asin()</a><span>, in §11.3</span>
   <li><a href="#funcdef-atan">atan()</a><span>, in §11.3</span>
   <li><a href="#funcdef-atan2">atan2()</a><span>, in §11.3</span>
   <li><a href="#funcdef-attr">attr()</a><span>, in §10</span>
   <li><a href="#typedef-attr-type">&lt;attr-type></a><span>, in §10</span>
   <li><a href="#bearing-angle">bearing angle</a><span>, in §7.1</span>
   <li><a href="#css-bracketed-range-notation">bracketed range notation</a><span>, in §5.1</span>
   <li><a href="#funcdef-calc">calc()</a><span>, in §11.1</span>
   <li><a href="#calculation-tree-calc-operator-nodes">calc-operator nodes</a><span>, in §11.7</span>
   <li><a href="#typedef-calc-product">&lt;calc-product></a><span>, in §11.5</span>
   <li><a href="#typedef-calc-sum">&lt;calc-sum></a><span>, in §11.5</span>
   <li><a href="#calc-calculation">calculation</a><span>, in §11.1</span>
   <li><a href="#calculation-tree">calculation tree</a><span>, in §11.7</span>
   <li><a href="#typedef-calc-value">&lt;calc-value></a><span>, in §11.5</span>
   <li><a href="#canonical-unit">canonical</a><span>, in §5.4.1</span>
   <li><a href="#canonical-unit">canonical unit</a><span>, in §5.4.1</span>
   <li><a href="#cap">cap</a><span>, in §6.1.1</span>
   <li><a href="#ch">ch</a><span>, in §6.1.1</span>
   <li><a href="#funcdef-clamp">clamp()</a><span>, in §11.2</span>
   <li><a href="#cm">cm</a><span>, in §6.2</span>
   <li><a href="#valdef-attr-color">color</a><span>, in §10.1</span>
   <li><a href="#combine">combine</a><span>, in §3</span>
   <li><a href="#compatible-units">compatible</a><span>, in §5.4.1</span>
   <li><a href="#compatible-units">compatible units</a><span>, in §5.4.1</span>
   <li><a href="#funcdef-cos">cos()</a><span>, in §11.3</span>
   <li><a href="#css-bracketed-range-notation">CSS bracketed range notation</a><span>, in §5.1</span>
   <li><a href="#css-identifier">CSS ident</a><span>, in §4</span>
   <li><a href="#css-identifier">CSS identifier</a><span>, in §4</span>
   <li><a href="#css-wide-keywords">CSS-wide keywords</a><span>, in §4.1.1</span>
   <li><a href="#identifier-value">&lt;custom-ident></a><span>, in §4.2</span>
   <li><a href="#deg">deg</a><span>, in §7.1</span>
   <li><a href="#determine-the-type-of-a-calculation">determine the type of a calculation</a><span>, in §11.6</span>
   <li><a href="#typedef-dimension">&lt;dimension></a><span>, in §5.4</span>
   <li><a href="#dimension">dimension</a><span>, in §5.4</span>
   <li>
    &lt;dimension-unit>
    <ul>
     <li><a href="#typedef-dimension-unit">(type)</a><span>, in §10</span>
     <li><a href="#valdef-attr-dimension-unit">value for attr()</a><span>, in §10.1</span>
    </ul>
   <li><a href="#dpcm">dpcm</a><span>, in §7.4</span>
   <li><a href="#dpi">dpi</a><span>, in §7.4</span>
   <li><a href="#dppx">dppx</a><span>, in §7.4</span>
   <li><a href="#em">em</a><span>, in §6.1.1</span>
   <li><a href="#ex">ex</a><span>, in §6.1.1</span>
   <li><a href="#valdef-attr-flex">flex</a><span>, in §10.1</span>
   <li><a href="#font-relative-length">font-relative lengths</a><span>, in §6.1.1</span>
   <li><a href="#valdef-attr-frequency">frequency</a><span>, in §10.1</span>
   <li><a href="#frequency-value">&lt;frequency></a><span>, in §7.3</span>
   <li><a href="#typedef-frequency-percentage">&lt;frequency-percentage></a><span>, in §5.6</span>
   <li><a href="#functional-notation">functional notation</a><span>, in §9</span>
   <li><a href="#grad">grad</a><span>, in §7.1</span>
   <li><a href="#funcdef-hypot">hypot()</a><span>, in §11.4</span>
   <li><a href="#Hz">Hz</a><span>, in §7.3</span>
   <li><a href="#ic">ic</a><span>, in §6.1.1</span>
   <li><a href="#typedef-ident">&lt;ident></a><span>, in §4</span>
   <li>
    ident
    <ul>
     <li><a href="#css-identifier">definition of</a><span>, in §4</span>
     <li><a href="#valdef-attr-ident">value for attr()</a><span>, in §10.1</span>
    </ul>
   <li><a href="#css-identifier">identifier</a><span>, in §4</span>
   <li><a href="#in">in</a><span>, in §6.2</span>
   <li><a href="#integer-value">&lt;integer></a><span>, in §5.2</span>
   <li><a href="#integer">integer</a><span>, in §5.2</span>
   <li><a href="#interpolation">interpolate</a><span>, in §3</span>
   <li><a href="#interpolation">interpolation</a><span>, in §3</span>
   <li><a href="#interpolation">interpolation procedure</a><span>, in §3</span>
   <li><a href="#css-keyword">keyword</a><span>, in §4.1</span>
   <li><a href="#kHz">kHz</a><span>, in §7.3</span>
   <li><a href="#length-value">&lt;length></a><span>, in §6</span>
   <li><a href="#valdef-attr-length">length</a><span>, in §10.1</span>
   <li><a href="#typedef-length-percentage">&lt;length-percentage></a><span>, in §5.6</span>
   <li><a href="#lh">lh</a><span>, in §6.1.1</span>
   <li><a href="#url-local-url-flag">local url flag</a><span>, in §4.4.1.1</span>
   <li><a href="#math-function">math function</a><span>, in §11</span>
   <li><a href="#funcdef-max">max()</a><span>, in §11.2</span>
   <li><a href="#funcdef-min">min()</a><span>, in §11.2</span>
   <li><a href="#mm">mm</a><span>, in §6.2</span>
   <li><a href="#ms">ms</a><span>, in §7.2</span>
   <li><a href="#not-additive">not additive</a><span>, in §3</span>
   <li><a href="#number-value">&lt;number></a><span>, in §5.3</span>
   <li>
    number
    <ul>
     <li><a href="#number">definition of</a><span>, in §5.3</span>
     <li><a href="#valdef-attr-number">value for attr()</a><span>, in §10.1</span>
    </ul>
   <li><a href="#numeric-data-types">numeric data types</a><span>, in §5</span>
   <li><a href="#calculation-tree-operator-nodes">operator nodes</a><span>, in §11.7</span>
   <li><a href="#parse-a-calculation">parse a calculation</a><span>, in §11.7</span>
   <li><a href="#parse-a-calculation">parsing a calculation</a><span>, in §11.7</span>
   <li><a href="#pc">pc</a><span>, in §6.2</span>
   <li><a href="#percentage-value">&lt;percentage></a><span>, in §5.5</span>
   <li>
    percentage
    <ul>
     <li><a href="#percentage">definition of</a><span>, in §5.5</span>
     <li><a href="#valdef-attr-percentage">value for attr()</a><span>, in §10.1</span>
    </ul>
   <li><a href="#physical-unit">physical unit</a><span>, in §6.2</span>
   <li><a href="#pixel-unit">pixel unit</a><span>, in §6.2</span>
   <li><a href="#typedef-position">&lt;position></a><span>, in §8.3</span>
   <li><a href="#funcdef-pow">pow()</a><span>, in §11.4</span>
   <li><a href="#pt">pt</a><span>, in §6.2</span>
   <li><a href="#px">px</a><span>, in §6.2</span>
   <li><a href="#Q">Q</a><span>, in §6.2</span>
   <li><a href="#rad">rad</a><span>, in §7.1</span>
   <li><a href="#reference-pixel">reference pixel</a><span>, in §6.2</span>
   <li><a href="#relative-length">relative length</a><span>, in §6.1</span>
   <li><a href="#rem">rem</a><span>, in §6.1.1</span>
   <li><a href="#resolution-value">&lt;resolution></a><span>, in §7.4</span>
   <li><a href="#rlh">rlh</a><span>, in §6.1.1</span>
   <li><a href="#s">s</a><span>, in §7.2</span>
   <li><a href="#serialize-a-calculation-tree">serialize a calculation tree</a><span>, in §11.10</span>
   <li><a href="#serialize-a-math-function">serialize a math function</a><span>, in §11.10</span>
   <li><a href="#serialize-a-calculation-tree">serialize the calculation tree</a><span>, in §11.10</span>
   <li><a href="#serialize-a-calculation-tree">serializing a calculation tree</a><span>, in §11.10</span>
   <li><a href="#serialize-a-calculation-tree">serializing the calculation tree</a><span>, in §11.10</span>
   <li><a href="#simplify-a-calculation-tree">simplify</a><span>, in §11.7.1</span>
   <li><a href="#simplify-a-calculation-tree">simplify a calculation tree</a><span>, in §11.7.1</span>
   <li><a href="#simplify-a-calculation-tree">simplifying a calculation tree</a><span>, in §11.7.1</span>
   <li><a href="#funcdef-sin">sin()</a><span>, in §11.3</span>
   <li><a href="#sort-a-calculations-children">sort a calculation’s children</a><span>, in §11.10</span>
   <li><a href="#funcdef-sqrt">sqrt()</a><span>, in §11.4</span>
   <li>
    string
    <ul>
     <li><a href="#string">definition of</a><span>, in §4.3</span>
     <li><a href="#valdef-attr-string">value for attr()</a><span>, in §10.1</span>
    </ul>
   <li><a href="#string-value">&lt;string></a><span>, in §4.3</span>
   <li><a href="#substitute-an-attr">substitute an attr()</a><span>, in §10.2</span>
   <li><a href="#attr-substitution-value">substitution value</a><span>, in §10</span>
   <li><a href="#funcdef-tan">tan()</a><span>, in §11.3</span>
   <li><a href="#css-textual-data-types">textual data types</a><span>, in §4</span>
   <li><a href="#time-value">&lt;time></a><span>, in §7.2</span>
   <li><a href="#valdef-attr-time">time</a><span>, in §10.1</span>
   <li><a href="#typedef-time-percentage">&lt;time-percentage></a><span>, in §5.6</span>
   <li><a href="#funcdef-toggle">toggle()</a><span>, in §9.1</span>
   <li><a href="#typedef-toggle-value">&lt;toggle-value></a><span>, in §9.1</span>
   <li><a href="#top-level-calculation">top-level calculation</a><span>, in §11.6</span>
   <li><a href="#turn">turn</a><span>, in §7.1</span>
   <li><a href="#funcdef-url">url()</a><span>, in §4.4</span>
   <li><a href="#url-value">&lt;url></a><span>, in §4.4</span>
   <li><a href="#valdef-attr-url">url</a><span>, in §10.1</span>
   <li><a href="#typedef-url-modifier">&lt;url-modifier></a><span>, in §4.4.3</span>
   <li><a href="#accumulation">value accumulation</a><span>, in §3</span>
   <li><a href="#addition">value addition</a><span>, in §3</span>
   <li><a href="#css-value-definition-syntax">value definition syntax</a><span>, in §2</span>
   <li><a href="#interpolation">value interpolation</a><span>, in §3</span>
   <li><a href="#valdef-length-vb">vb</a><span>, in §6.1.2</span>
   <li><a href="#vh">vh</a><span>, in §6.1.2</span>
   <li><a href="#valdef-length-vi">vi</a><span>, in §6.1.2</span>
   <li><a href="#viewport-percentage-lengths">viewport-percentage lengths</a><span>, in §6.1.2</span>
   <li><a href="#pixel-unit">visual angle unit</a><span>, in §6.2</span>
   <li><a href="#vmax">vmax</a><span>, in §6.1.2</span>
   <li><a href="#vmin">vmin</a><span>, in §6.1.2</span>
   <li><a href="#vw">vw</a><span>, in §6.1.2</span>
   <li><a href="#x">x</a><span>, in §7.4</span>
   <li><a href="#zero-value">&lt;zero></a><span>, in §5.3</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-animation">
   <a href="https://drafts.csswg.org/css-animations-1/#propdef-animation">https://drafts.csswg.org/css-animations-1/#propdef-animation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-animation">4.2. 
Author-defined Identifiers: the &lt;custom-ident> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-animation-iteration-count">
   <a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-iteration-count">https://drafts.csswg.org/css-animations-1/#propdef-animation-iteration-count</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-animation-iteration-count">11.9. 
Range Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-animation-name">
   <a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-name">https://drafts.csswg.org/css-animations-1/#propdef-animation-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-animation-name">4.2. 
Author-defined Identifiers: the &lt;custom-ident> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-animation-timing-function">
   <a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function">https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-animation-timing-function">4.2. 
Author-defined Identifiers: the &lt;custom-ident> type</a> <a href="#ref-for-propdef-animation-timing-function①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-top">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-top">https://drafts.csswg.org/css-box-3/#propdef-padding-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-top">2.6. 
Property Value Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-orphans">
   <a href="https://drafts.csswg.org/css-break-3/#propdef-orphans">https://drafts.csswg.org/css-break-3/#propdef-orphans</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-orphans">2.6. 
Property Value Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-at-ruledef-import">
   <a href="https://drafts.csswg.org/css-cascade-4/#at-ruledef-import">https://drafts.csswg.org/css-cascade-4/#at-ruledef-import</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-at-ruledef-import">4.4. 
Resource Locators: the &lt;url> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-actual-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#actual-value">https://drafts.csswg.org/css-cascade-4/#actual-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-actual-value">6. 
Distance Units: the &lt;length> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-computed-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#computed-value">https://drafts.csswg.org/css-cascade-4/#computed-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-value">3. 
Combining Values: Interpolation, Addition, and Accumulation</a> <a href="#ref-for-computed-value①">(2)</a> <a href="#ref-for-computed-value②">(3)</a>
    <li><a href="#ref-for-computed-value③">4. 
Textual Data Types</a>
    <li><a href="#ref-for-computed-value④">5. 
Numeric Data Types</a>
    <li><a href="#ref-for-computed-value⑤">5.4.1. 
Compatible Units</a>
    <li><a href="#ref-for-computed-value⑥">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-computed-value⑦">11.8. 
Computed Value</a> <a href="#ref-for-computed-value⑧">(2)</a> <a href="#ref-for-computed-value⑨">(3)</a>
    <li><a href="#ref-for-computed-value①⓪">11.9. 
Range Checking</a> <a href="#ref-for-computed-value①①">(2)</a>
    <li><a href="#ref-for-computed-value①②">11.10. 
Serialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-all-inherit">
   <a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit">https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-all-inherit">2.1. 
Component Value Types</a>
    <li><a href="#ref-for-valdef-all-inherit①">4.1.1. 
CSS-wide keywords: initial, inherit and unset</a> <a href="#ref-for-valdef-all-inherit②">(2)</a> <a href="#ref-for-valdef-all-inherit③">(3)</a>
    <li><a href="#ref-for-valdef-all-inherit④">9.1. 
Toggling Between Values: toggle()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inherited-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#inherited-value">https://drafts.csswg.org/css-cascade-4/#inherited-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inherited-value">9.1. 
Toggling Between Values: toggle()</a> <a href="#ref-for-inherited-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-all-initial">
   <a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-initial">https://drafts.csswg.org/css-cascade-4/#valdef-all-initial</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-all-initial">4.1.1. 
CSS-wide keywords: initial, inherit and unset</a> <a href="#ref-for-valdef-all-initial①">(2)</a> <a href="#ref-for-valdef-all-initial②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-shorthand-property">
   <a href="https://drafts.csswg.org/css-cascade-4/#shorthand-property">https://drafts.csswg.org/css-cascade-4/#shorthand-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-shorthand-property">9.1. 
Toggling Between Values: toggle()</a> <a href="#ref-for-shorthand-property①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-shorthand-property">
   <a href="https://drafts.csswg.org/css-cascade-4/#shorthand-property">https://drafts.csswg.org/css-cascade-4/#shorthand-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-shorthand-property">9.1. 
Toggling Between Values: toggle()</a> <a href="#ref-for-shorthand-property①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-specified-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#specified-value">https://drafts.csswg.org/css-cascade-4/#specified-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-specified-value">4. 
Textual Data Types</a>
    <li><a href="#ref-for-specified-value①">5. 
Numeric Data Types</a>
    <li><a href="#ref-for-specified-value②">11.9. 
Range Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-all-unset">
   <a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-unset">https://drafts.csswg.org/css-cascade-4/#valdef-all-unset</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-all-unset">4.1.1. 
CSS-wide keywords: initial, inherit and unset</a> <a href="#ref-for-valdef-all-unset①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-used-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#used-value">https://drafts.csswg.org/css-cascade-4/#used-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-used-value">5.4.1. 
Compatible Units</a> <a href="#ref-for-used-value①">(2)</a>
    <li><a href="#ref-for-used-value②">6. 
Distance Units: the &lt;length> type</a>
    <li><a href="#ref-for-used-value③">11.8. 
Computed Value</a> <a href="#ref-for-used-value④">(2)</a>
    <li><a href="#ref-for-used-value⑤">11.9. 
Range Checking</a> <a href="#ref-for-used-value⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-hex-color">
   <a href="https://drafts.csswg.org/css-color-4/#typedef-hex-color">https://drafts.csswg.org/css-color-4/#typedef-hex-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-hex-color">10.1. 
attr() Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-color-currentcolor">
   <a href="https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor">https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-currentcolor">8.1.1. 
Combination of &lt;color></a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-hsl">
   <a href="https://drafts.csswg.org/css-color-4/#funcdef-hsl">https://drafts.csswg.org/css-color-4/#funcdef-hsl</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-hsl">5.6. 
Mixing Percentages and Dimensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-named-color">
   <a href="https://drafts.csswg.org/css-color-4/#named-color">https://drafts.csswg.org/css-color-4/#named-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-named-color">10.1. 
attr() Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-opacity">
   <a href="https://drafts.csswg.org/css-color-4/#propdef-opacity">https://drafts.csswg.org/css-color-4/#propdef-opacity</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-opacity">11.6. 
Type Checking</a> <a href="#ref-for-propdef-opacity①">(2)</a> <a href="#ref-for-propdef-opacity②">(3)</a> <a href="#ref-for-propdef-opacity③">(4)</a> <a href="#ref-for-propdef-opacity④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-rgba">
   <a href="https://drafts.csswg.org/css-color-4/#funcdef-rgba">https://drafts.csswg.org/css-color-4/#funcdef-rgba</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-rgba">9. 
Functional Notations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-disc">
   <a href="https://drafts.csswg.org/css-counter-styles-3/#disc">https://drafts.csswg.org/css-counter-styles-3/#disc</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-disc">2.1. 
Component Value Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-containing-block">
   <a href="https://drafts.csswg.org/css-display-3/#containing-block">https://drafts.csswg.org/css-display-3/#containing-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-containing-block">5.5. 
Percentages: the &lt;percentage> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-easing-function">
   <a href="https://drafts.csswg.org/css-easing-1/#typedef-easing-function">https://drafts.csswg.org/css-easing-1/#typedef-easing-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-easing-function">4.2. 
Author-defined Identifiers: the &lt;custom-ident> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-cubic-bezier-easing-function-ease-in">
   <a href="https://drafts.csswg.org/css-easing-1/#valdef-cubic-bezier-easing-function-ease-in">https://drafts.csswg.org/css-easing-1/#valdef-cubic-bezier-easing-function-ease-in</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-cubic-bezier-easing-function-ease-in">4.2. 
Author-defined Identifiers: the &lt;custom-ident> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-cubic-bezier-easing-function-ease-out">
   <a href="https://drafts.csswg.org/css-easing-1/#valdef-cubic-bezier-easing-function-ease-out">https://drafts.csswg.org/css-easing-1/#valdef-cubic-bezier-easing-function-ease-out</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-cubic-bezier-easing-function-ease-out">4.2. 
Author-defined Identifiers: the &lt;custom-ident> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-easing-function">
   <a href="https://drafts.csswg.org/css-easing-1/#easing-function">https://drafts.csswg.org/css-easing-1/#easing-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-easing-function">3. 
Combining Values: Interpolation, Addition, and Accumulation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-flex">
   <a href="https://drafts.csswg.org/css-grid-1/#typedef-flex">https://drafts.csswg.org/css-grid-1/#typedef-flex</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-flex">10. 
Attribute References: the attr() function</a>
    <li><a href="#ref-for-typedef-flex①">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-typedef-flex②">11.6. 
Type Checking</a> <a href="#ref-for-typedef-flex③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-flex-fr">
   <a href="https://drafts.csswg.org/css-grid-1/#valdef-flex-fr">https://drafts.csswg.org/css-grid-1/#valdef-flex-fr</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-flex-fr">5. 
Numeric Data Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-image-resolution">
   <a href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">https://drafts.csswg.org/css-images-4/#propdef-image-resolution</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-image-resolution">7.4. 
Resolution Units: the &lt;resolution> type and dpi, dpcm, dppx units</a> <a href="#ref-for-propdef-image-resolution①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-line-height-normal">
   <a href="https://drafts.csswg.org/css-inline-3/#valdef-line-height-normal">https://drafts.csswg.org/css-inline-3/#valdef-line-height-normal</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-line-height-normal">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a> <a href="#ref-for-valdef-line-height-normal①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-overflow-auto">
   <a href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-auto">https://drafts.csswg.org/css-overflow-3/#valdef-overflow-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-overflow-auto">6.1.2. 
Viewport-percentage Lengths: the vw, vh, vi, vb, vmin, vmax units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-overflow">
   <a href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">https://drafts.csswg.org/css-overflow-3/#propdef-overflow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-overflow">6.1.2. 
Viewport-percentage Lengths: the vw, vh, vi, vb, vmin, vmax units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-max-lines">
   <a href="https://drafts.csswg.org/css-overflow-4/#propdef-max-lines">https://drafts.csswg.org/css-overflow-4/#propdef-max-lines</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-max-lines">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-width-auto">
   <a href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">https://drafts.csswg.org/css-sizing-3/#valdef-width-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-width-auto">11.8. 
Computed Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-box-sizing">
   <a href="https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing">https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-box-sizing">11.1. 
Basic Arithmetic: calc()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-min-width">
   <a href="https://drafts.csswg.org/css-sizing-3/#propdef-min-width">https://drafts.csswg.org/css-sizing-3/#propdef-min-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-min-width">11.2. 
Comparison Functions: min(), max(), and clamp()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-text-align-center">
   <a href="https://drafts.csswg.org/css-text-3/#valdef-text-align-center">https://drafts.csswg.org/css-text-3/#valdef-text-align-center</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-align-center">2.6. 
Property Value Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-tab-size">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-tab-size">https://drafts.csswg.org/css-text-3/#propdef-tab-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-tab-size">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-align">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-text-align">https://drafts.csswg.org/css-text-3/#propdef-text-align</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-align">2.6. 
Property Value Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-decoration">
   <a href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration">https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-decoration">2.6. 
Property Value Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-emphasis-color">
   <a href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-emphasis-color">https://drafts.csswg.org/css-text-decor-3/#propdef-text-emphasis-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-emphasis-color">8.1.1. 
Combination of &lt;color></a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-transform-origin">
   <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-origin">https://drafts.csswg.org/css-transforms-1/#propdef-transform-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-transform-origin">8.3. 
2D Positioning: the &lt;position> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssnumericvalue-add-two-types">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-add-two-types">https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-add-two-types</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssnumericvalue-add-two-types">11.6. 
Type Checking</a> <a href="#ref-for-cssnumericvalue-add-two-types①">(2)</a> <a href="#ref-for-cssnumericvalue-add-two-types②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssnumericvalue-invert-a-type">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-invert-a-type">https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-invert-a-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssnumericvalue-invert-a-type">11.6. 
Type Checking</a>
    <li><a href="#ref-for-cssnumericvalue-invert-a-type①">11.7.1. 
Simplification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssnumericvalue-match">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match">https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssnumericvalue-match">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a> <a href="#ref-for-cssnumericvalue-match①">(2)</a>
    <li><a href="#ref-for-cssnumericvalue-match②">11.6. 
Type Checking</a> <a href="#ref-for-cssnumericvalue-match③">(2)</a>
    <li><a href="#ref-for-cssnumericvalue-match④">11.7.1. 
Simplification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssnumericvalue-multiply-two-types">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types">https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssnumericvalue-multiply-two-types">11.6. 
Type Checking</a> <a href="#ref-for-cssnumericvalue-multiply-two-types①">(2)</a>
    <li><a href="#ref-for-cssnumericvalue-multiply-two-types②">11.7.1. 
Simplification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssnumericvalue-percent-hint">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-percent-hint">https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-percent-hint</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssnumericvalue-percent-hint">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssnumericvalue-type">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type">https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssnumericvalue-type">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a> <a href="#ref-for-cssnumericvalue-type①">(2)</a> <a href="#ref-for-cssnumericvalue-type②">(3)</a>
    <li><a href="#ref-for-cssnumericvalue-type③">11.6. 
Type Checking</a> <a href="#ref-for-cssnumericvalue-type④">(2)</a> <a href="#ref-for-cssnumericvalue-type⑤">(3)</a> <a href="#ref-for-cssnumericvalue-type⑥">(4)</a> <a href="#ref-for-cssnumericvalue-type⑦">(5)</a> <a href="#ref-for-cssnumericvalue-type⑧">(6)</a> <a href="#ref-for-cssnumericvalue-type⑨">(7)</a> <a href="#ref-for-cssnumericvalue-type①⓪">(8)</a> <a href="#ref-for-cssnumericvalue-type①①">(9)</a> <a href="#ref-for-cssnumericvalue-type①②">(10)</a> <a href="#ref-for-cssnumericvalue-type①③">(11)</a> <a href="#ref-for-cssnumericvalue-type①④">(12)</a> <a href="#ref-for-cssnumericvalue-type①⑤">(13)</a> <a href="#ref-for-cssnumericvalue-type①⑥">(14)</a> <a href="#ref-for-cssnumericvalue-type①⑦">(15)</a> <a href="#ref-for-cssnumericvalue-type①⑧">(16)</a> <a href="#ref-for-cssnumericvalue-type①⑨">(17)</a> <a href="#ref-for-cssnumericvalue-type②⓪">(18)</a> <a href="#ref-for-cssnumericvalue-type②①">(19)</a> <a href="#ref-for-cssnumericvalue-type②②">(20)</a> <a href="#ref-for-cssnumericvalue-type②③">(21)</a> <a href="#ref-for-cssnumericvalue-type②④">(22)</a> <a href="#ref-for-cssnumericvalue-type②⑤">(23)</a> <a href="#ref-for-cssnumericvalue-type②⑥">(24)</a> <a href="#ref-for-cssnumericvalue-type②⑦">(25)</a>
    <li><a href="#ref-for-cssnumericvalue-type②⑧">11.10. 
Serialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-cursor-default">
   <a href="https://drafts.csswg.org/css-ui-4/#valdef-cursor-default">https://drafts.csswg.org/css-ui-4/#valdef-cursor-default</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-cursor-default">4.2. 
Author-defined Identifiers: the &lt;custom-ident> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-outline-color">
   <a href="https://drafts.csswg.org/css-ui-4/#propdef-outline-color">https://drafts.csswg.org/css-ui-4/#propdef-outline-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-outline-color">2.6. 
Property Value Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-custom-property">
   <a href="https://drafts.csswg.org/css-variables-1/#custom-property">https://drafts.csswg.org/css-variables-1/#custom-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-property">10. 
Attribute References: the attr() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalid-at-computed-value-time">
   <a href="https://drafts.csswg.org/css-variables-1/#invalid-at-computed-value-time">https://drafts.csswg.org/css-variables-1/#invalid-at-computed-value-time</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalid-at-computed-value-time">10.2. 
attr() Substitution</a> <a href="#ref-for-invalid-at-computed-value-time①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-substitute-a-var">
   <a href="https://drafts.csswg.org/css-variables-1/#substitute-a-var">https://drafts.csswg.org/css-variables-1/#substitute-a-var</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-substitute-a-var">10.2. 
attr() Substitution</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-var">
   <a href="https://drafts.csswg.org/css-variables-1/#funcdef-var">https://drafts.csswg.org/css-variables-1/#funcdef-var</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-var">10. 
Attribute References: the attr() function</a>
    <li><a href="#ref-for-funcdef-var①">10.2. 
attr() Substitution</a>
    <li><a href="#ref-for-funcdef-var②">11.1. 
Basic Arithmetic: calc()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-axis">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-axis">https://drafts.csswg.org/css-writing-modes-4/#block-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-axis">6.1. 
Relative Lengths</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-axis">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis">https://drafts.csswg.org/css-writing-modes-4/#inline-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-axis">6.1. 
Relative Lengths</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-orientation">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation">https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-orientation">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-text-orientation-upright">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#valdef-text-orientation-upright">https://drafts.csswg.org/css-writing-modes-4/#valdef-text-orientation-upright</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-orientation-upright">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-writing-mode-vertical-lr">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-lr">https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-lr</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-writing-mode-vertical-lr">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-writing-mode-vertical-rl">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-rl">https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-rl</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-writing-mode-vertical-rl">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-writing-mode">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a>
    <li><a href="#ref-for-propdef-writing-mode①">6.1.2. 
Viewport-percentage Lengths: the vw, vh, vi, vb, vmin, vmax units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-value-def-border-width">
   <a href="https://drafts.csswg.org/css2/box.html#value-def-border-width">https://drafts.csswg.org/css2/box.html#value-def-border-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-value-def-border-width">2.1. 
Component Value Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-position">
   <a href="https://drafts.csswg.org/css2/colors.html#propdef-background-position">https://drafts.csswg.org/css2/colors.html#propdef-background-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-position②">9.1. 
Toggling Between Values: toggle()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-collapse">
   <a href="https://drafts.csswg.org/css2/tables.html#propdef-border-collapse">https://drafts.csswg.org/css2/tables.html#propdef-border-collapse</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-collapse">4.1. 
Pre-defined Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">https://drafts.csswg.org/css2/visudet.html#propdef-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-height">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-line-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height">https://drafts.csswg.org/css2/visudet.html#propdef-line-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-line-height">6. 
Distance Units: the &lt;length> type</a>
    <li><a href="#ref-for-propdef-line-height①">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a> <a href="#ref-for-propdef-line-height②">(2)</a> <a href="#ref-for-propdef-line-height③">(3)</a> <a href="#ref-for-propdef-line-height④">(4)</a> <a href="#ref-for-propdef-line-height⑤">(5)</a> <a href="#ref-for-propdef-line-height⑥">(6)</a> <a href="#ref-for-propdef-line-height⑦">(7)</a> <a href="#ref-for-propdef-line-height⑧">(8)</a>
    <li><a href="#ref-for-propdef-line-height⑨">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">https://drafts.csswg.org/css2/visudet.html#propdef-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-width">5.6. 
Mixing Percentages and Dimensions</a> <a href="#ref-for-propdef-width①">(2)</a> <a href="#ref-for-propdef-width②">(3)</a> <a href="#ref-for-propdef-width③">(4)</a> <a href="#ref-for-propdef-width④">(5)</a> <a href="#ref-for-propdef-width⑤">(6)</a> <a href="#ref-for-propdef-width⑥">(7)</a>
    <li><a href="#ref-for-propdef-width⑦">10. 
Attribute References: the attr() function</a>
    <li><a href="#ref-for-propdef-width⑧">11.1. 
Basic Arithmetic: calc()</a>
    <li><a href="#ref-for-propdef-width⑨">11.6. 
Type Checking</a> <a href="#ref-for-propdef-width①⓪">(2)</a> <a href="#ref-for-propdef-width①①">(3)</a> <a href="#ref-for-propdef-width①②">(4)</a> <a href="#ref-for-propdef-width①③">(5)</a> <a href="#ref-for-propdef-width①④">(6)</a>
    <li><a href="#ref-for-propdef-width①⑤">11.9. 
Range Checking</a> <a href="#ref-for-propdef-width①⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background">https://drafts.csswg.org/css-backgrounds-3/#propdef-background</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background">2.1. 
Component Value Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-attachment">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-attachment">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-attachment</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-attachment">2.1. 
Component Value Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-position">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-position">8.3. 
2D Positioning: the &lt;position> type</a> <a href="#ref-for-propdef-background-position①">(2)</a>
    <li><a href="#ref-for-propdef-background-position③">9.1. 
Toggling Between Values: toggle()</a> <a href="#ref-for-propdef-background-position④">(2)</a>
    <li><a href="#ref-for-propdef-background-position⑤">11.8. 
Computed Value</a> <a href="#ref-for-propdef-background-position⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-color">2.1. 
Component Value Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-width">2.1. 
Component Value Types</a> <a href="#ref-for-propdef-border-width①">(2)</a> <a href="#ref-for-propdef-border-width②">(3)</a>
    <li><a href="#ref-for-propdef-border-width③">2.6. 
Property Value Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-box-shadow">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow">https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-box-shadow">2.6. 
Property Value Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font">https://drafts.csswg.org/css-fonts-3/#propdef-font</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a> <a href="#ref-for-propdef-font①">(2)</a> <a href="#ref-for-propdef-font②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-family">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-family">https://drafts.csswg.org/css-fonts-3/#propdef-font-family</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-family">2.6. 
Property Value Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-size">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size">https://drafts.csswg.org/css-fonts-3/#propdef-font-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-size">5.4.1. 
Compatible Units</a>
    <li><a href="#ref-for-propdef-font-size①">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a> <a href="#ref-for-propdef-font-size②">(2)</a> <a href="#ref-for-propdef-font-size③">(3)</a> <a href="#ref-for-propdef-font-size④">(4)</a>
    <li><a href="#ref-for-propdef-font-size⑤">11.1. 
Basic Arithmetic: calc()</a> <a href="#ref-for-propdef-font-size⑥">(2)</a>
    <li><a href="#ref-for-propdef-font-size⑦">11.2. 
Comparison Functions: min(), max(), and clamp()</a>
    <li><a href="#ref-for-propdef-font-size⑧">11.8. 
Computed Value</a> <a href="#ref-for-propdef-font-size⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-image">
   <a href="https://drafts.csswg.org/css-images-3/#typedef-image">https://drafts.csswg.org/css-images-3/#typedef-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-image">8.2. 
Images: the &lt;image> type</a> <a href="#ref-for-typedef-image①">(2)</a> <a href="#ref-for-typedef-image②">(3)</a> <a href="#ref-for-typedef-image③">(4)</a>
    <li><a href="#ref-for-typedef-image④">8.2.1. 
Combination of &lt;image></a> <a href="#ref-for-typedef-image⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-linear-gradient">
   <a href="https://drafts.csswg.org/css-images-3/#funcdef-linear-gradient">https://drafts.csswg.org/css-images-3/#funcdef-linear-gradient</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-linear-gradient">7.1. 
Angle Units: the &lt;angle> type and deg, grad, rad, turn units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valuea-def-color">
   <a href="https://drafts.csswg.org/css-color-3/#valuea-def-color">https://drafts.csswg.org/css-color-3/#valuea-def-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valuea-def-color">8.1. 
Colors: the &lt;color> type</a> <a href="#ref-for-valuea-def-color①">(2)</a> <a href="#ref-for-valuea-def-color②">(3)</a>
    <li><a href="#ref-for-valuea-def-color③">8.1.1. 
Combination of &lt;color></a> <a href="#ref-for-valuea-def-color④">(2)</a>
    <li><a href="#ref-for-valuea-def-color⑤">10.1. 
attr() Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-declaration-value">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value">https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-declaration-value">10. 
Attribute References: the attr() function</a> <a href="#ref-for-typedef-declaration-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-delim-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-delim-token">https://drafts.csswg.org/css-syntax-3/#typedef-delim-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-delim-token">10. 
Attribute References: the attr() function</a>
    <li><a href="#ref-for-typedef-delim-token①">11.7. 
Internal Representation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-dimension-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token">https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-dimension-token">2.5. 
Component Values and White Space</a>
    <li><a href="#ref-for-typedef-dimension-token①">5.4. 
Numbers with Units: dimension values</a>
    <li><a href="#ref-for-typedef-dimension-token②">10.1. 
attr() Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-function-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-function-token">https://drafts.csswg.org/css-syntax-3/#typedef-function-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-function-token">9. 
Functional Notations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-ident-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-ident-token">https://drafts.csswg.org/css-syntax-3/#typedef-ident-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-ident-token">4. 
Textual Data Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-number-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token">https://drafts.csswg.org/css-syntax-3/#typedef-number-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-number-token">5.2. 
Integers: the &lt;integer> type</a>
    <li><a href="#ref-for-typedef-number-token①">5.3. 
Real Numbers: the &lt;number> type</a> <a href="#ref-for-typedef-number-token②">(2)</a>
    <li><a href="#ref-for-typedef-number-token③">10.1. 
attr() Types</a> <a href="#ref-for-typedef-number-token④">(2)</a>
    <li><a href="#ref-for-typedef-number-token⑤">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-percentage-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-percentage-token">https://drafts.csswg.org/css-syntax-3/#typedef-percentage-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-percentage-token">5.5. 
Percentages: the &lt;percentage> type</a>
    <li><a href="#ref-for-typedef-percentage-token①">10.1. 
attr() Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-string-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-string-token">https://drafts.csswg.org/css-syntax-3/#typedef-string-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-string-token">4.3. 
Quoted Strings: the &lt;string> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-url-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-url-token">https://drafts.csswg.org/css-syntax-3/#typedef-url-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-url-token">4.4. 
Resource Locators: the &lt;url> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-whitespace-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-whitespace-token">https://drafts.csswg.org/css-syntax-3/#typedef-whitespace-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-whitespace-token">11.7. 
Internal Representation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-component-value">
   <a href="https://drafts.csswg.org/css-syntax-3/#component-value">https://drafts.csswg.org/css-syntax-3/#component-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-component-value">2.4. 
Combinator and Multiplier Patterns</a>
    <li><a href="#ref-for-component-value①">5.6. 
Mixing Percentages and Dimensions</a>
    <li><a href="#ref-for-component-value②">11.7. 
Internal Representation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-consume-a-url-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#consume-a-url-token">https://drafts.csswg.org/css-syntax-3/#consume-a-url-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-consume-a-url-token">4.4. 
Resource Locators: the &lt;url> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-parse-a-component-value">
   <a href="https://drafts.csswg.org/css-syntax-3/#parse-a-component-value">https://drafts.csswg.org/css-syntax-3/#parse-a-component-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-parse-a-component-value">10.1. 
attr() Types</a> <a href="#ref-for-parse-a-component-value①">(2)</a> <a href="#ref-for-parse-a-component-value②">(3)</a> <a href="#ref-for-parse-a-component-value③">(4)</a> <a href="#ref-for-parse-a-component-value④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-simple-block">
   <a href="https://drafts.csswg.org/css-syntax-3/#simple-block">https://drafts.csswg.org/css-syntax-3/#simple-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-simple-block">11.7. 
Internal Representation</a> <a href="#ref-for-simple-block①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-whitespace">
   <a href="https://drafts.csswg.org/css-syntax-3/#whitespace">https://drafts.csswg.org/css-syntax-3/#whitespace</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-whitespace">11.5. 
Syntax</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-attribute">
   <a href="https://dom.spec.whatwg.org/#concept-attribute">https://dom.spec.whatwg.org/#concept-attribute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-attribute">10. 
Attribute References: the attr() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-element">
   <a href="https://dom.spec.whatwg.org/#concept-element">https://dom.spec.whatwg.org/#concept-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-element">10. 
Attribute References: the attr() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-base-element">
   <a href="https://html.spec.whatwg.org/multipage/semantics.html#the-base-element">https://html.spec.whatwg.org/multipage/semantics.html#the-base-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-base-element">4.4.1.1. 
Fragment URLs</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-case-sensitive">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#case-sensitive">https://html.spec.whatwg.org/multipage/infrastructure.html#case-sensitive</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-case-sensitive">4.2. 
Author-defined Identifiers: the &lt;custom-ident> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-history-pushstate">
   <a href="https://html.spec.whatwg.org/multipage/history.html#dom-history-pushstate">https://html.spec.whatwg.org/multipage/history.html#dom-history-pushstate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-history-pushstate">4.4.1.1. 
Fragment URLs</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ascii-case-insensitive">
   <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">https://infra.spec.whatwg.org/#ascii-case-insensitive</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ascii-case-insensitive">4.1. 
Pre-defined Keywords</a>
    <li><a href="#ref-for-ascii-case-insensitive①">4.2. 
Author-defined Identifiers: the &lt;custom-ident> type</a>
    <li><a href="#ref-for-ascii-case-insensitive②">5.4. 
Numbers with Units: dimension values</a>
    <li><a href="#ref-for-ascii-case-insensitive③">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a>
    <li><a href="#ref-for-ascii-case-insensitive④">7.3. 
Frequency Units: the &lt;frequency> type and Hz, kHz units</a>
    <li><a href="#ref-for-ascii-case-insensitive⑤">11.10. 
Serialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-string-concatenate">
   <a href="https://infra.spec.whatwg.org/#string-concatenate">https://infra.spec.whatwg.org/#string-concatenate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-string-concatenate">11.10. 
Serialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-iterate">
   <a href="https://infra.spec.whatwg.org/#list-iterate">https://infra.spec.whatwg.org/#list-iterate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-iterate">11.10. 
Serialization</a> <a href="#ref-for-list-iterate①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-strip-leading-and-trailing-ascii-whitespace">
   <a href="https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace">https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-strip-leading-and-trailing-ascii-whitespace">10.1. 
attr() Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-media-query">
   <a href="https://drafts.csswg.org/mediaqueries-4/#media-query">https://drafts.csswg.org/mediaqueries-4/#media-query</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-media-query">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a>
    <li><a href="#ref-for-media-query①">6.1.2. 
Viewport-percentage Lengths: the vw, vh, vi, vb, vmin, vmax units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-wq-name">
   <a href="https://drafts.csswg.org/selectors-4/#typedef-wq-name">https://drafts.csswg.org/selectors-4/#typedef-wq-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-wq-name">10. 
Attribute References: the attr() function</a> <a href="#ref-for-typedef-wq-name①">(2)</a> <a href="#ref-for-typedef-wq-name②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-attribute-selector">
   <a href="https://drafts.csswg.org/selectors-4/#attribute-selector">https://drafts.csswg.org/selectors-4/#attribute-selector</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attribute-selector">10. 
Attribute References: the attr() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-originating-element">
   <a href="https://drafts.csswg.org/selectors-4/#originating-element">https://drafts.csswg.org/selectors-4/#originating-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-originating-element">10. 
Attribute References: the attr() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-url">
   <a href="https://url.spec.whatwg.org/#concept-url">https://url.spec.whatwg.org/#concept-url</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-url">4.4. 
Resource Locators: the &lt;url> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-discrete">
   <a href="https://drafts.csswg.org/web-animations-1/#discrete">https://drafts.csswg.org/web-animations-1/#discrete</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-discrete">4. 
Textual Data Types</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-animations-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-animation" style="color:initial">animation</span>
     <li><span class="dfn-paneled" id="term-for-propdef-animation-iteration-count" style="color:initial">animation-iteration-count</span>
     <li><span class="dfn-paneled" id="term-for-propdef-animation-name" style="color:initial">animation-name</span>
     <li><span class="dfn-paneled" id="term-for-propdef-animation-timing-function" style="color:initial">animation-timing-function</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-box-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-top" style="color:initial">padding-top</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-break-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-orphans" style="color:initial">orphans</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-at-ruledef-import" style="color:initial">@import</span>
     <li><span class="dfn-paneled" id="term-for-actual-value" style="color:initial">actual value</span>
     <li><span class="dfn-paneled" id="term-for-computed-value" style="color:initial">computed value</span>
     <li><span class="dfn-paneled" id="term-for-valdef-all-inherit" style="color:initial">inherit</span>
     <li><span class="dfn-paneled" id="term-for-inherited-value" style="color:initial">inherited value</span>
     <li><span class="dfn-paneled" id="term-for-valdef-all-initial" style="color:initial">initial</span>
     <li><span class="dfn-paneled" id="term-for-shorthand-property" style="color:initial">shorthand</span>
     <li><span class="dfn-paneled" id="term-for-shorthand-property①" style="color:initial">shorthand property</span>
     <li><span class="dfn-paneled" id="term-for-specified-value" style="color:initial">specified value</span>
     <li><span class="dfn-paneled" id="term-for-valdef-all-unset" style="color:initial">unset</span>
     <li><span class="dfn-paneled" id="term-for-used-value" style="color:initial">used value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-hex-color" style="color:initial">&lt;hex-color></span>
     <li><span class="dfn-paneled" id="term-for-valdef-color-currentcolor" style="color:initial">currentcolor</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-hsl" style="color:initial">hsl()</span>
     <li><span class="dfn-paneled" id="term-for-named-color" style="color:initial">named color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-opacity" style="color:initial">opacity</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-rgba" style="color:initial">rgba()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-counter-styles-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-disc" style="color:initial">disc</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-containing-block" style="color:initial">containing block</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-easing-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-easing-function" style="color:initial">&lt;easing-function></span>
     <li><span class="dfn-paneled" id="term-for-valdef-cubic-bezier-easing-function-ease-in" style="color:initial">ease-in</span>
     <li><span class="dfn-paneled" id="term-for-valdef-cubic-bezier-easing-function-ease-out" style="color:initial">ease-out</span>
     <li><span class="dfn-paneled" id="term-for-easing-function" style="color:initial">timing function</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-grid-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-flex" style="color:initial">&lt;flex></span>
     <li><span class="dfn-paneled" id="term-for-valdef-flex-fr" style="color:initial">fr</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-images-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-image-resolution" style="color:initial">image-resolution</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-inline-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-line-height-normal" style="color:initial">normal</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-overflow-auto" style="color:initial">auto</span>
     <li><span class="dfn-paneled" id="term-for-propdef-overflow" style="color:initial">overflow</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-max-lines" style="color:initial">max-lines</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-sizing-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-width-auto" style="color:initial">auto</span>
     <li><span class="dfn-paneled" id="term-for-propdef-box-sizing" style="color:initial">box-sizing</span>
     <li><span class="dfn-paneled" id="term-for-propdef-min-width" style="color:initial">min-width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-text-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-text-align-center" style="color:initial">center</span>
     <li><span class="dfn-paneled" id="term-for-propdef-tab-size" style="color:initial">tab-size</span>
     <li><span class="dfn-paneled" id="term-for-propdef-text-align" style="color:initial">text-align</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-text-decor-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-text-decoration" style="color:initial">text-decoration</span>
     <li><span class="dfn-paneled" id="term-for-propdef-text-emphasis-color" style="color:initial">text-emphasis-color</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-transforms-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-transform-origin" style="color:initial">transform-origin</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-typed-om-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cssnumericvalue-add-two-types" style="color:initial">add two types</span>
     <li><span class="dfn-paneled" id="term-for-cssnumericvalue-invert-a-type" style="color:initial">invert a type</span>
     <li><span class="dfn-paneled" id="term-for-cssnumericvalue-match" style="color:initial">match</span>
     <li><span class="dfn-paneled" id="term-for-cssnumericvalue-multiply-two-types" style="color:initial">multiply two types</span>
     <li><span class="dfn-paneled" id="term-for-cssnumericvalue-percent-hint" style="color:initial">percent hint</span>
     <li><span class="dfn-paneled" id="term-for-cssnumericvalue-type" style="color:initial">type</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-ui-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-cursor-default" style="color:initial">default</span>
     <li><span class="dfn-paneled" id="term-for-propdef-outline-color" style="color:initial">outline-color</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-variables-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-custom-property" style="color:initial">custom property</span>
     <li><span class="dfn-paneled" id="term-for-invalid-at-computed-value-time" style="color:initial">invalid at computed-value time</span>
     <li><span class="dfn-paneled" id="term-for-substitute-a-var" style="color:initial">substitute a var()</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-var" style="color:initial">var()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-block-axis" style="color:initial">block axis</span>
     <li><span class="dfn-paneled" id="term-for-inline-axis" style="color:initial">inline axis</span>
     <li><span class="dfn-paneled" id="term-for-propdef-text-orientation" style="color:initial">text-orientation</span>
     <li><span class="dfn-paneled" id="term-for-valdef-text-orientation-upright" style="color:initial">upright</span>
     <li><span class="dfn-paneled" id="term-for-valdef-writing-mode-vertical-lr" style="color:initial">vertical-lr</span>
     <li><span class="dfn-paneled" id="term-for-valdef-writing-mode-vertical-rl" style="color:initial">vertical-rl</span>
     <li><span class="dfn-paneled" id="term-for-propdef-writing-mode" style="color:initial">writing-mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS21]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-value-def-border-width" style="color:initial">&lt;border-width></span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-position" style="color:initial">background-position</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-collapse" style="color:initial">border-collapse</span>
     <li><span class="dfn-paneled" id="term-for-propdef-height" style="color:initial">height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-line-height" style="color:initial">line-height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-width" style="color:initial">width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-BACKGROUND]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-background" style="color:initial">background</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-attachment" style="color:initial">background-attachment</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-position①" style="color:initial">background-position</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-color" style="color:initial">border-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-width" style="color:initial">border-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-box-shadow" style="color:initial">box-shadow</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-FONTS]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-font" style="color:initial">font</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-family" style="color:initial">font-family</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-size" style="color:initial">font-size</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-IMAGES]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-image" style="color:initial">&lt;image></span>
     <li><span class="dfn-paneled" id="term-for-funcdef-linear-gradient" style="color:initial">linear-gradient()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3COLOR]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valuea-def-color" style="color:initial">&lt;color></span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3SYN]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-declaration-value" style="color:initial">&lt;declaration-value></span>
     <li><span class="dfn-paneled" id="term-for-typedef-delim-token" style="color:initial">&lt;delim-token></span>
     <li><span class="dfn-paneled" id="term-for-typedef-dimension-token" style="color:initial">&lt;dimension-token></span>
     <li><span class="dfn-paneled" id="term-for-typedef-function-token" style="color:initial">&lt;function-token></span>
     <li><span class="dfn-paneled" id="term-for-typedef-ident-token" style="color:initial">&lt;ident-token></span>
     <li><span class="dfn-paneled" id="term-for-typedef-number-token" style="color:initial">&lt;number-token></span>
     <li><span class="dfn-paneled" id="term-for-typedef-percentage-token" style="color:initial">&lt;percentage-token></span>
     <li><span class="dfn-paneled" id="term-for-typedef-string-token" style="color:initial">&lt;string-token></span>
     <li><span class="dfn-paneled" id="term-for-typedef-url-token" style="color:initial">&lt;url-token></span>
     <li><span class="dfn-paneled" id="term-for-typedef-whitespace-token" style="color:initial">&lt;whitespace-token></span>
     <li><span class="dfn-paneled" id="term-for-component-value" style="color:initial">component value</span>
     <li><span class="dfn-paneled" id="term-for-consume-a-url-token" style="color:initial">consume a url token</span>
     <li><span class="dfn-paneled" id="term-for-parse-a-component-value" style="color:initial">parse a component value</span>
     <li><span class="dfn-paneled" id="term-for-simple-block" style="color:initial">simple block</span>
     <li><span class="dfn-paneled" id="term-for-whitespace" style="color:initial">whitespace</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-attribute" style="color:initial">attribute</span>
     <li><span class="dfn-paneled" id="term-for-concept-element" style="color:initial">element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-base-element" style="color:initial">base</span>
     <li><span class="dfn-paneled" id="term-for-case-sensitive" style="color:initial">case-sensitive</span>
     <li><span class="dfn-paneled" id="term-for-dom-history-pushstate" style="color:initial">pushState(data, title)</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-ascii-case-insensitive" style="color:initial">ascii case-insensitive</span>
     <li><span class="dfn-paneled" id="term-for-string-concatenate" style="color:initial">concatenate</span>
     <li><span class="dfn-paneled" id="term-for-list-iterate" style="color:initial">for each</span>
     <li><span class="dfn-paneled" id="term-for-strip-leading-and-trailing-ascii-whitespace" style="color:initial">strip leading and trailing ascii whitespace</span>
    </ul>
   <li>
    <a data-link-type="biblio">[MEDIAQ]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-media-query" style="color:initial">media query</span>
    </ul>
   <li>
    <a data-link-type="biblio">[selectors-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-wq-name" style="color:initial">&lt;wq-name></span>
     <li><span class="dfn-paneled" id="term-for-attribute-selector" style="color:initial">attribute selector</span>
     <li><span class="dfn-paneled" id="term-for-originating-element" style="color:initial">originating element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[URL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-url" style="color:initial">url</span>
    </ul>
   <li>
    <a data-link-type="biblio">[web-animations-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-discrete" style="color:initial">discrete</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-color-4">[CSS-COLOR-4]
   <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>. 5 March 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
   <dt id="biblio-css-counter-styles-3">[CSS-COUNTER-STYLES-3]
   <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-counter-styles-3/">CSS Counter Styles Level 3</a>. 14 December 2017. CR. URL: <a href="https://www.w3.org/TR/css-counter-styles-3/">https://www.w3.org/TR/css-counter-styles-3/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-easing-1">[CSS-EASING-1]
   <dd>Brian Birtles; Dean Jackson; Matt Rakow. <a href="https://www.w3.org/TR/css-easing-1/">CSS Easing Functions Level 1</a>. 30 April 2019. CR. URL: <a href="https://www.w3.org/TR/css-easing-1/">https://www.w3.org/TR/css-easing-1/</a>
   <dt id="biblio-css-grid-1">[CSS-GRID-1]
   <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 14 December 2017. CR. URL: <a href="https://www.w3.org/TR/css-grid-1/">https://www.w3.org/TR/css-grid-1/</a>
   <dt id="biblio-css-images-4">[CSS-IMAGES-4]
   <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module Level 4</a>. 13 April 2017. WD. URL: <a href="https://www.w3.org/TR/css-images-4/">https://www.w3.org/TR/css-images-4/</a>
   <dt id="biblio-css-inline-3">[CSS-INLINE-3]
   <dd>Dave Cramer; Elika Etemad; Steve Zilles. <a href="https://www.w3.org/TR/css-inline-3/">CSS Inline Layout Module Level 3</a>. 8 August 2018. WD. URL: <a href="https://www.w3.org/TR/css-inline-3/">https://www.w3.org/TR/css-inline-3/</a>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-sizing-3">[CSS-SIZING-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/">CSS Intrinsic &amp; Extrinsic Sizing Module Level 3</a>. 22 May 2019. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a>
   <dt id="biblio-css-text-decor-3">[CSS-TEXT-DECOR-3]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>. 3 July 2018. CR. URL: <a href="https://www.w3.org/TR/css-text-decor-3/">https://www.w3.org/TR/css-text-decor-3/</a>
   <dt id="biblio-css-typed-om-1">[CSS-TYPED-OM-1]
   <dd>Shane Stephens; Tab Atkins Jr.; Naina Raisinghani. <a href="https://www.w3.org/TR/css-typed-om-1/">CSS Typed OM Level 1</a>. 10 April 2018. WD. URL: <a href="https://www.w3.org/TR/css-typed-om-1/">https://www.w3.org/TR/css-typed-om-1/</a>
   <dt id="biblio-css-ui-4">[CSS-UI-4]
   <dd>Florian Rivoal. <a href="https://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>. 22 December 2017. WD. URL: <a href="https://www.w3.org/TR/css-ui-4/">https://www.w3.org/TR/css-ui-4/</a>
   <dt id="biblio-css-variables-1">[CSS-VARIABLES-1]
   <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-variables-1/">CSS Custom Properties for Cascading Variables Module Level 1</a>. 3 December 2015. CR. URL: <a href="https://www.w3.org/TR/css-variables-1/">https://www.w3.org/TR/css-variables-1/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-css21">[CSS21]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-css3-background">[CSS3-BACKGROUND]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css3-fonts">[CSS3-FONTS]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. 20 September 2018. REC. URL: <a href="https://www.w3.org/TR/css-fonts-3/">https://www.w3.org/TR/css-fonts-3/</a>
   <dt id="biblio-css3-images">[CSS3-IMAGES]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css3-images/">CSS Image Values and Replaced Content Module Level 3</a>. 17 April 2012. CR. URL: <a href="https://www.w3.org/TR/css3-images/">https://www.w3.org/TR/css3-images/</a>
   <dt id="biblio-css3cascade">[CSS3CASCADE]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-3/">CSS Cascading and Inheritance Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-3/">https://www.w3.org/TR/css-cascade-3/</a>
   <dt id="biblio-css3color">[CSS3COLOR]
   <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/">CSS Color Module Level 3</a>. 19 June 2018. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a>
   <dt id="biblio-css3page">[CSS3PAGE]
   <dd>Elika Etemad; Simon Sapin. <a href="https://www.w3.org/TR/css-page-3/">CSS Paged Media Module Level 3</a>. 18 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-page-3/">https://www.w3.org/TR/css-page-3/</a>
   <dt id="biblio-css3syn">[CSS3SYN]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-cssom">[CSSOM]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-mediaq">[MEDIAQ]
   <dd>Florian Rivoal; Tab Atkins Jr.. <a href="https://www.w3.org/TR/mediaqueries-4/">Media Queries Level 4</a>. 5 September 2017. CR. URL: <a href="https://www.w3.org/TR/mediaqueries-4/">https://www.w3.org/TR/mediaqueries-4/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-selectors-4">[SELECTORS-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a>
   <dt id="biblio-unicode">[UNICODE]
   <dd><a href="https://www.unicode.org/versions/latest/">The Unicode Standard</a>. URL: <a href="https://www.unicode.org/versions/latest/">https://www.unicode.org/versions/latest/</a>
   <dt id="biblio-url">[URL]
   <dd>Anne van Kesteren. <a href="https://url.spec.whatwg.org/">URL Standard</a>. Living Standard. URL: <a href="https://url.spec.whatwg.org/">https://url.spec.whatwg.org/</a>
   <dt id="biblio-web-animations-1">[WEB-ANIMATIONS-1]
   <dd>Brian Birtles; et al. <a href="https://www.w3.org/TR/web-animations-1/">Web Animations</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/web-animations-1/">https://www.w3.org/TR/web-animations-1/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css-animations-1">[CSS-ANIMATIONS-1]
   <dd>Dean Jackson; et al. <a href="https://www.w3.org/TR/css-animations-1/">CSS Animations Level 1</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-animations-1/">https://www.w3.org/TR/css-animations-1/</a>
   <dt id="biblio-css-box-3">[CSS-BOX-3]
   <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-3/">CSS Box Model Module Level 3</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a>
   <dt id="biblio-css-break-3">[CSS-BREAK-3]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a>
   <dt id="biblio-css-overflow-4">[CSS-OVERFLOW-4]
   <dd>David Baron; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-4/">CSS Overflow Module Level 4</a>. 13 June 2017. WD. URL: <a href="https://www.w3.org/TR/css-overflow-4/">https://www.w3.org/TR/css-overflow-4/</a>
   <dt id="biblio-css-text-3">[CSS-TEXT-3]
   <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 12 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-text-3/">https://www.w3.org/TR/css-text-3/</a>
   <dt id="biblio-css-transforms-1">[CSS-TRANSFORMS-1]
   <dd>Simon Fraser; et al. <a href="https://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 14 February 2019. CR. URL: <a href="https://www.w3.org/TR/css-transforms-1/">https://www.w3.org/TR/css-transforms-1/</a>
   <dt id="biblio-rfc6694">[RFC6694]
   <dd>S. Moonesamy, Ed.. <a href="https://tools.ietf.org/html/rfc6694">The "about" URI Scheme</a>. August 2012. Informational. URL: <a href="https://tools.ietf.org/html/rfc6694">https://tools.ietf.org/html/rfc6694</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> We can potentially add more typographic units,
	like cicero, didot, etc.
	They’re just absolute units,
	and so can be done with the existing units,
	but is there enough desire for them
	(potentially for printing use-cases)
	that it would be worth adding them?
	Or should we just wait for Houdini Custom Units?<a href="#issue-7dc6ac0d"> ↵ </a></div>
   <div class="issue"> Computed value needs to be able to represent
	combinations of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor">currentColor</a> and an actual color.
	Consider the value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-emphasis-color">text-emphasis-color</a> in <code>div { text-emphasis: circle; transition: all 2s; }<br> div:hover { text-emphasis-color: lime; }<br> em { color: red; }</code> See <a href="https://github.com/w3c/csswg-drafts/issues/445">Issue 445</a>.<a href="#issue-7fabb422"> ↵ </a></div>
   <div class="issue"> Do we want to allow <a data-link-type="dfn" href="#math-function">math functions</a> as attr values
	for all the numeric types?
	And color functions for "color"?
	I think we do,
	but I’d have to check the contents to make sure they don’t contain further reference functions; <code class="highlight">foo="rgb(var(--red), 0, 0)"</code> needs to be illegal for <span class="css">attr(foo color)</span>.<a href="#issue-168aea69"> ↵ </a></div>
   <div class="issue"> attr() and var() substitute at the same time,
	so I should probably rewrite <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#substitute-a-var">substitute a var()</a> to be more generally about "substitute a reference"
	and just use that for both of these functions.<a href="#issue-9dd81cfe"> ↵ </a></div>
   <div class="issue"> This section is still <a href="https://lists.w3.org/Archives/Member/w3c-css-wg/2016AprJun/0239.html">under discussion</a>.<a href="#issue-f5bc4b00"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="comb-comma">
   <b><a href="#comb-comma">#comb-comma</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-comma">2.1. 
Component Value Types</a> <a href="#ref-for-comb-comma①">(2)</a>
    <li><a href="#ref-for-comb-comma②">10. 
Attribute References: the attr() function</a>
    <li><a href="#ref-for-comb-comma③">11.5. 
Syntax</a> <a href="#ref-for-comb-comma④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="comb-all">
   <b><a href="#comb-all">#comb-all</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-all">8.3. 
2D Positioning: the &lt;position> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="comb-any">
   <b><a href="#comb-any">#comb-any</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-any">8.3. 
2D Positioning: the &lt;position> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="comb-one">
   <b><a href="#comb-one">#comb-one</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">5.6. 
Mixing Percentages and Dimensions</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a>
    <li><a href="#ref-for-comb-one④">8.3. 
2D Positioning: the &lt;position> type</a> <a href="#ref-for-comb-one⑤">(2)</a> <a href="#ref-for-comb-one⑥">(3)</a> <a href="#ref-for-comb-one⑦">(4)</a> <a href="#ref-for-comb-one⑧">(5)</a> <a href="#ref-for-comb-one⑨">(6)</a> <a href="#ref-for-comb-one①⓪">(7)</a> <a href="#ref-for-comb-one①①">(8)</a> <a href="#ref-for-comb-one①②">(9)</a> <a href="#ref-for-comb-one①③">(10)</a> <a href="#ref-for-comb-one①④">(11)</a> <a href="#ref-for-comb-one①⑤">(12)</a> <a href="#ref-for-comb-one①⑥">(13)</a> <a href="#ref-for-comb-one①⑦">(14)</a>
    <li><a href="#ref-for-comb-one①⑧">10. 
Attribute References: the attr() function</a> <a href="#ref-for-comb-one①⑨">(2)</a> <a href="#ref-for-comb-one②⓪">(3)</a> <a href="#ref-for-comb-one②①">(4)</a> <a href="#ref-for-comb-one②②">(5)</a> <a href="#ref-for-comb-one②③">(6)</a> <a href="#ref-for-comb-one②④">(7)</a> <a href="#ref-for-comb-one②⑤">(8)</a> <a href="#ref-for-comb-one②⑥">(9)</a> <a href="#ref-for-comb-one②⑦">(10)</a> <a href="#ref-for-comb-one②⑧">(11)</a>
    <li><a href="#ref-for-comb-one②⑨">11.5. 
Syntax</a> <a href="#ref-for-comb-one③⓪">(2)</a> <a href="#ref-for-comb-one③①">(3)</a> <a href="#ref-for-comb-one③②">(4)</a> <a href="#ref-for-comb-one③③">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mult-zero-plus">
   <b><a href="#mult-zero-plus">#mult-zero-plus</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-zero-plus">4.4. 
Resource Locators: the &lt;url> type</a>
    <li><a href="#ref-for-mult-zero-plus①">11.5. 
Syntax</a> <a href="#ref-for-mult-zero-plus②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mult-opt">
   <b><a href="#mult-opt">#mult-opt</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">2.1. 
Component Value Types</a> <a href="#ref-for-mult-opt①">(2)</a> <a href="#ref-for-mult-opt②">(3)</a>
    <li><a href="#ref-for-mult-opt③">8.3. 
2D Positioning: the &lt;position> type</a>
    <li><a href="#ref-for-mult-opt④">10. 
Attribute References: the attr() function</a> <a href="#ref-for-mult-opt⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mult-comma">
   <b><a href="#mult-comma">#mult-comma</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-comma">2.1. 
Component Value Types</a>
    <li><a href="#ref-for-mult-comma">11.5. 
Syntax</a> <a href="#ref-for-mult-comma①">(2)</a> <a href="#ref-for-mult-comma②">(3)</a> <a href="#ref-for-mult-comma③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="interpolation">
   <b><a href="#interpolation">#interpolation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-interpolation">3. 
Combining Values: Interpolation, Addition, and Accumulation</a>
    <li><a href="#ref-for-interpolation①">4. 
Textual Data Types</a>
    <li><a href="#ref-for-interpolation②">5.2.1. 
Combination of &lt;integer></a>
    <li><a href="#ref-for-interpolation③">5.3.1. 
Combination of &lt;number></a>
    <li><a href="#ref-for-interpolation④">5.4.2. 
Combination of Dimensions</a>
    <li><a href="#ref-for-interpolation⑤">5.5.1. 
Combination of &lt;percentage></a>
    <li><a href="#ref-for-interpolation⑥">5.6.1. 
Combination of Percentage and Dimension Mixes</a> <a href="#ref-for-interpolation⑦">(2)</a> <a href="#ref-for-interpolation⑧">(3)</a> <a href="#ref-for-interpolation⑨">(4)</a> <a href="#ref-for-interpolation①⓪">(5)</a> <a href="#ref-for-interpolation①①">(6)</a>
    <li><a href="#ref-for-interpolation①②">8.1.1. 
Combination of &lt;color></a>
    <li><a href="#ref-for-interpolation①③">8.3.1. 
Combination of &lt;position></a>
    <li><a href="#ref-for-interpolation①④">11.11. 
Combination of Math Functions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="addition">
   <b><a href="#addition">#addition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-addition">3. 
Combining Values: Interpolation, Addition, and Accumulation</a> <a href="#ref-for-addition①">(2)</a> <a href="#ref-for-addition②">(3)</a> <a href="#ref-for-addition③">(4)</a> <a href="#ref-for-addition④">(5)</a> <a href="#ref-for-addition⑤">(6)</a> <a href="#ref-for-addition⑥">(7)</a>
    <li><a href="#ref-for-addition⑦">5.2.1. 
Combination of &lt;integer></a>
    <li><a href="#ref-for-addition⑧">5.3.1. 
Combination of &lt;number></a>
    <li><a href="#ref-for-addition⑨">5.4.2. 
Combination of Dimensions</a>
    <li><a href="#ref-for-addition①⓪">5.5.1. 
Combination of &lt;percentage></a>
    <li><a href="#ref-for-addition①①">5.6.1. 
Combination of Percentage and Dimension Mixes</a> <a href="#ref-for-addition①②">(2)</a>
    <li><a href="#ref-for-addition①③">8.1.1. 
Combination of &lt;color></a> <a href="#ref-for-addition①④">(2)</a>
    <li><a href="#ref-for-addition①⑤">8.3.1. 
Combination of &lt;position></a> <a href="#ref-for-addition①⑥">(2)</a>
    <li><a href="#ref-for-addition①⑦">11.11. 
Combination of Math Functions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="accumulation">
   <b><a href="#accumulation">#accumulation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-accumulation">3. 
Combining Values: Interpolation, Addition, and Accumulation</a> <a href="#ref-for-accumulation①">(2)</a> <a href="#ref-for-accumulation②">(3)</a> <a href="#ref-for-accumulation③">(4)</a> <a href="#ref-for-accumulation④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="not-additive">
   <b><a href="#not-additive">#not-additive</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-not-additive">4. 
Textual Data Types</a>
    <li><a href="#ref-for-not-additive①">8.2.1. 
Combination of &lt;image></a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="css-identifier">
   <b><a href="#css-identifier">#css-identifier</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-identifier">4. 
Textual Data Types</a>
    <li><a href="#ref-for-css-identifier①">4.1. 
Pre-defined Keywords</a>
    <li><a href="#ref-for-css-identifier②">4.2. 
Author-defined Identifiers: the &lt;custom-ident> type</a>
    <li><a href="#ref-for-css-identifier③">5.4. 
Numbers with Units: dimension values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-ident">
   <b><a href="#typedef-ident">#typedef-ident</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-ident">4. 
Textual Data Types</a>
    <li><a href="#ref-for-typedef-ident①">4.4.3. 
URL Modifiers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="css-wide-keywords">
   <b><a href="#css-wide-keywords">#css-wide-keywords</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-wide-keywords">4.2. 
Author-defined Identifiers: the &lt;custom-ident> type</a>
    <li><a href="#ref-for-css-wide-keywords①">10.1. 
attr() Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="identifier-value">
   <b><a href="#identifier-value">#identifier-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-identifier-value">2.1. 
Component Value Types</a> <a href="#ref-for-identifier-value①">(2)</a> <a href="#ref-for-identifier-value②">(3)</a>
    <li><a href="#ref-for-identifier-value③">4. 
Textual Data Types</a>
    <li><a href="#ref-for-identifier-value④">4.2. 
Author-defined Identifiers: the &lt;custom-ident> type</a> <a href="#ref-for-identifier-value⑤">(2)</a> <a href="#ref-for-identifier-value⑥">(3)</a> <a href="#ref-for-identifier-value⑦">(4)</a> <a href="#ref-for-identifier-value⑧">(5)</a> <a href="#ref-for-identifier-value⑨">(6)</a> <a href="#ref-for-identifier-value①⓪">(7)</a> <a href="#ref-for-identifier-value①①">(8)</a> <a href="#ref-for-identifier-value①②">(9)</a>
    <li><a href="#ref-for-identifier-value①③">10.1. 
attr() Types</a> <a href="#ref-for-identifier-value①④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="string">
   <b><a href="#string">#string</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-string">11.10. 
Serialization</a> <a href="#ref-for-string①">(2)</a> <a href="#ref-for-string②">(3)</a> <a href="#ref-for-string③">(4)</a> <a href="#ref-for-string④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="string-value">
   <b><a href="#string-value">#string-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-string-value">4. 
Textual Data Types</a>
    <li><a href="#ref-for-string-value①">4.3. 
Quoted Strings: the &lt;string> type</a>
    <li><a href="#ref-for-string-value②">4.4. 
Resource Locators: the &lt;url> type</a> <a href="#ref-for-string-value③">(2)</a> <a href="#ref-for-string-value④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-url">
   <b><a href="#funcdef-url">#funcdef-url</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-url">4.4. 
Resource Locators: the &lt;url> type</a> <a href="#ref-for-funcdef-url①">(2)</a> <a href="#ref-for-funcdef-url②">(3)</a>
    <li><a href="#ref-for-funcdef-url③">4.4.1.1. 
Fragment URLs</a> <a href="#ref-for-funcdef-url④">(2)</a> <a href="#ref-for-funcdef-url⑤">(3)</a> <a href="#ref-for-funcdef-url⑥">(4)</a>
    <li><a href="#ref-for-funcdef-url⑦">4.4.2. 
Empty URLs</a> <a href="#ref-for-funcdef-url⑧">(2)</a> <a href="#ref-for-funcdef-url⑨">(3)</a> <a href="#ref-for-funcdef-url①⓪">(4)</a>
    <li><a href="#ref-for-funcdef-url①①">4.4.3. 
URL Modifiers</a> <a href="#ref-for-funcdef-url①②">(2)</a>
    <li><a href="#ref-for-funcdef-url①③">10.1. 
attr() Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="url-value">
   <b><a href="#url-value">#url-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-url-value">4. 
Textual Data Types</a>
    <li><a href="#ref-for-url-value①">4.4. 
Resource Locators: the &lt;url> type</a> <a href="#ref-for-url-value②">(2)</a> <a href="#ref-for-url-value③">(3)</a> <a href="#ref-for-url-value④">(4)</a> <a href="#ref-for-url-value⑤">(5)</a>
    <li><a href="#ref-for-url-value⑥">4.4.1. 
Relative URLs</a>
    <li><a href="#ref-for-url-value⑦">4.4.3. 
URL Modifiers</a>
    <li><a href="#ref-for-url-value⑧">8.2. 
Images: the &lt;image> type</a>
    <li><a href="#ref-for-url-value⑨">10.1. 
attr() Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="url-local-url-flag">
   <b><a href="#url-local-url-flag">#url-local-url-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-url-local-url-flag">4.4.1.1. 
Fragment URLs</a> <a href="#ref-for-url-local-url-flag①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-url-modifier">
   <b><a href="#typedef-url-modifier">#typedef-url-modifier</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-url-modifier">4.4. 
Resource Locators: the &lt;url> type</a> <a href="#ref-for-typedef-url-modifier①">(2)</a>
    <li><a href="#ref-for-typedef-url-modifier②">4.4.3. 
URL Modifiers</a> <a href="#ref-for-typedef-url-modifier③">(2)</a> <a href="#ref-for-typedef-url-modifier④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="numeric-data-types">
   <b><a href="#numeric-data-types">#numeric-data-types</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-numeric-data-types">2.1. 
Component Value Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="css-bracketed-range-notation">
   <b><a href="#css-bracketed-range-notation">#css-bracketed-range-notation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-bracketed-range-notation">5.1. 
Range Restrictions and Range Definition Notation</a> <a href="#ref-for-css-bracketed-range-notation①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="integer-value">
   <b><a href="#integer-value">#integer-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-integer-value">2.1. 
Component Value Types</a> <a href="#ref-for-integer-value①">(2)</a> <a href="#ref-for-integer-value②">(3)</a>
    <li><a href="#ref-for-integer-value③">5. 
Numeric Data Types</a>
    <li><a href="#ref-for-integer-value④">5.1. 
Range Restrictions and Range Definition Notation</a>
    <li><a href="#ref-for-integer-value⑤">5.2. 
Integers: the &lt;integer> type</a>
    <li><a href="#ref-for-integer-value⑥">5.2.1. 
Combination of &lt;integer></a> <a href="#ref-for-integer-value⑦">(2)</a> <a href="#ref-for-integer-value⑧">(3)</a>
    <li><a href="#ref-for-integer-value⑨">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-integer-value①⓪">11.6. 
Type Checking</a> <a href="#ref-for-integer-value①①">(2)</a> <a href="#ref-for-integer-value①②">(3)</a>
    <li><a href="#ref-for-integer-value①③">11.9. 
Range Checking</a>
    <li><a href="#ref-for-integer-value①④"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="integer">
   <b><a href="#integer">#integer</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-integer">5.3. 
Real Numbers: the &lt;number> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="number-value">
   <b><a href="#number-value">#number-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-number-value">5. 
Numeric Data Types</a>
    <li><a href="#ref-for-number-value①">5.2.1. 
Combination of &lt;integer></a> <a href="#ref-for-number-value②">(2)</a>
    <li><a href="#ref-for-number-value③">5.3. 
Real Numbers: the &lt;number> type</a> <a href="#ref-for-number-value④">(2)</a>
    <li><a href="#ref-for-number-value⑤">5.3.1. 
Combination of &lt;number></a> <a href="#ref-for-number-value⑥">(2)</a> <a href="#ref-for-number-value⑦">(3)</a>
    <li><a href="#ref-for-number-value⑧">5.6. 
Mixing Percentages and Dimensions</a>
    <li><a href="#ref-for-number-value⑨">6. 
Distance Units: the &lt;length> type</a> <a href="#ref-for-number-value①⓪">(2)</a> <a href="#ref-for-number-value①①">(3)</a>
    <li><a href="#ref-for-number-value①②">8.1.1. 
Combination of &lt;color></a> <a href="#ref-for-number-value①③">(2)</a> <a href="#ref-for-number-value①④">(3)</a>
    <li><a href="#ref-for-number-value①⑤">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-number-value①⑥">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a> <a href="#ref-for-number-value①⑦">(2)</a> <a href="#ref-for-number-value①⑧">(3)</a> <a href="#ref-for-number-value①⑨">(4)</a>
    <li><a href="#ref-for-number-value②⓪">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a> <a href="#ref-for-number-value②①">(2)</a> <a href="#ref-for-number-value②②">(3)</a> <a href="#ref-for-number-value②③">(4)</a> <a href="#ref-for-number-value②④">(5)</a>
    <li><a href="#ref-for-number-value②⑤">11.5. 
Syntax</a>
    <li><a href="#ref-for-number-value②⑥">11.6. 
Type Checking</a> <a href="#ref-for-number-value②⑦">(2)</a> <a href="#ref-for-number-value②⑧">(3)</a> <a href="#ref-for-number-value②⑨">(4)</a> <a href="#ref-for-number-value③⓪">(5)</a> <a href="#ref-for-number-value③①">(6)</a> <a href="#ref-for-number-value③②">(7)</a> <a href="#ref-for-number-value③③">(8)</a> <a href="#ref-for-number-value③④">(9)</a> <a href="#ref-for-number-value③⑤">(10)</a> <a href="#ref-for-number-value③⑥">(11)</a>
    <li><a href="#ref-for-number-value③⑦">11.9. 
Range Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="number">
   <b><a href="#number">#number</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-number">5.3. 
Real Numbers: the &lt;number> type</a>
    <li><a href="#ref-for-number①">5.4. 
Numbers with Units: dimension values</a>
    <li><a href="#ref-for-number②">5.5. 
Percentages: the &lt;percentage> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="zero-value">
   <b><a href="#zero-value">#zero-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-zero-value">5.3. 
Real Numbers: the &lt;number> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dimension">
   <b><a href="#dimension">#dimension</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dimension">5. 
Numeric Data Types</a> <a href="#ref-for-dimension①">(2)</a>
    <li><a href="#ref-for-dimension②">5.4. 
Numbers with Units: dimension values</a> <a href="#ref-for-dimension③">(2)</a>
    <li><a href="#ref-for-dimension④">5.4.1. 
Compatible Units</a>
    <li><a href="#ref-for-dimension⑤">5.4.2. 
Combination of Dimensions</a> <a href="#ref-for-dimension⑥">(2)</a>
    <li><a href="#ref-for-dimension⑦">5.6. 
Mixing Percentages and Dimensions</a>
    <li><a href="#ref-for-dimension⑧">6. 
Distance Units: the &lt;length> type</a>
    <li><a href="#ref-for-dimension⑨">7.2. 
Duration Units: the &lt;time> type and s, ms units</a>
    <li><a href="#ref-for-dimension①⓪">7.3. 
Frequency Units: the &lt;frequency> type and Hz, kHz units</a>
    <li><a href="#ref-for-dimension①①">7.4. 
Resolution Units: the &lt;resolution> type and dpi, dpcm, dppx units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-dimension">
   <b><a href="#typedef-dimension">#typedef-dimension</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-dimension">5.4. 
Numbers with Units: dimension values</a>
    <li><a href="#ref-for-typedef-dimension①">7.1. 
Angle Units: the &lt;angle> type and deg, grad, rad, turn units</a>
    <li><a href="#ref-for-typedef-dimension②">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a>
    <li><a href="#ref-for-typedef-dimension③">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a>
    <li><a href="#ref-for-typedef-dimension④">11.5. 
Syntax</a>
    <li><a href="#ref-for-typedef-dimension⑤">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="compatible-units">
   <b><a href="#compatible-units">#compatible-units</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-compatible-units">5.4.1. 
Compatible Units</a> <a href="#ref-for-compatible-units①">(2)</a>
    <li><a href="#ref-for-compatible-units②">5.4.2. 
Combination of Dimensions</a> <a href="#ref-for-compatible-units③">(2)</a>
    <li><a href="#ref-for-compatible-units④">5.6. 
Mixing Percentages and Dimensions</a>
    <li><a href="#ref-for-compatible-units⑤">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a>
    <li><a href="#ref-for-compatible-units⑥">7.1. 
Angle Units: the &lt;angle> type and deg, grad, rad, turn units</a>
    <li><a href="#ref-for-compatible-units⑦">7.2. 
Duration Units: the &lt;time> type and s, ms units</a>
    <li><a href="#ref-for-compatible-units⑧">7.3. 
Frequency Units: the &lt;frequency> type and Hz, kHz units</a>
    <li><a href="#ref-for-compatible-units⑨">7.4. 
Resolution Units: the &lt;resolution> type and dpi, dpcm, dppx units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="canonical-unit">
   <b><a href="#canonical-unit">#canonical-unit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canonical-unit">3. 
Combining Values: Interpolation, Addition, and Accumulation</a>
    <li><a href="#ref-for-canonical-unit①">5.4.1. 
Compatible Units</a>
    <li><a href="#ref-for-canonical-unit②">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a>
    <li><a href="#ref-for-canonical-unit③">7.1. 
Angle Units: the &lt;angle> type and deg, grad, rad, turn units</a>
    <li><a href="#ref-for-canonical-unit④">7.2. 
Duration Units: the &lt;time> type and s, ms units</a>
    <li><a href="#ref-for-canonical-unit⑤">7.3. 
Frequency Units: the &lt;frequency> type and Hz, kHz units</a>
    <li><a href="#ref-for-canonical-unit⑥">7.4. 
Resolution Units: the &lt;resolution> type and dpi, dpcm, dppx units</a>
    <li><a href="#ref-for-canonical-unit⑦">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a>
    <li><a href="#ref-for-canonical-unit⑧">11.7.1. 
Simplification</a> <a href="#ref-for-canonical-unit⑨">(2)</a> <a href="#ref-for-canonical-unit①⓪">(3)</a> <a href="#ref-for-canonical-unit①①">(4)</a> <a href="#ref-for-canonical-unit①②">(5)</a> <a href="#ref-for-canonical-unit①③">(6)</a>
    <li><a href="#ref-for-canonical-unit①④">11.10. 
Serialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="percentage-value">
   <b><a href="#percentage-value">#percentage-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-percentage-value">2.1. 
Component Value Types</a>
    <li><a href="#ref-for-percentage-value①">5. 
Numeric Data Types</a>
    <li><a href="#ref-for-percentage-value②">5.5. 
Percentages: the &lt;percentage> type</a>
    <li><a href="#ref-for-percentage-value③">5.5.1. 
Combination of &lt;percentage></a> <a href="#ref-for-percentage-value④">(2)</a> <a href="#ref-for-percentage-value⑤">(3)</a>
    <li><a href="#ref-for-percentage-value⑥">5.6. 
Mixing Percentages and Dimensions</a> <a href="#ref-for-percentage-value⑦">(2)</a> <a href="#ref-for-percentage-value⑧">(3)</a> <a href="#ref-for-percentage-value⑨">(4)</a> <a href="#ref-for-percentage-value①⓪">(5)</a> <a href="#ref-for-percentage-value①①">(6)</a> <a href="#ref-for-percentage-value①②">(7)</a> <a href="#ref-for-percentage-value①③">(8)</a> <a href="#ref-for-percentage-value①④">(9)</a> <a href="#ref-for-percentage-value①⑤">(10)</a> <a href="#ref-for-percentage-value①⑥">(11)</a> <a href="#ref-for-percentage-value①⑦">(12)</a> <a href="#ref-for-percentage-value①⑧">(13)</a>
    <li><a href="#ref-for-percentage-value①⑨">5.6.1. 
Combination of Percentage and Dimension Mixes</a> <a href="#ref-for-percentage-value②⓪">(2)</a> <a href="#ref-for-percentage-value②①">(3)</a> <a href="#ref-for-percentage-value②②">(4)</a>
    <li><a href="#ref-for-percentage-value②③">8.3. 
2D Positioning: the &lt;position> type</a>
    <li><a href="#ref-for-percentage-value②④">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-percentage-value②⑤">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a>
    <li><a href="#ref-for-percentage-value②⑥">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a>
    <li><a href="#ref-for-percentage-value②⑦">11.5. 
Syntax</a>
    <li><a href="#ref-for-percentage-value②⑧">11.6. 
Type Checking</a> <a href="#ref-for-percentage-value②⑨">(2)</a> <a href="#ref-for-percentage-value③⓪">(3)</a> <a href="#ref-for-percentage-value③①">(4)</a> <a href="#ref-for-percentage-value③②">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-length-percentage">
   <b><a href="#typedef-length-percentage">#typedef-length-percentage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-length-percentage">5.6.1. 
Combination of Percentage and Dimension Mixes</a>
    <li><a href="#ref-for-typedef-length-percentage①">8.3. 
2D Positioning: the &lt;position> type</a> <a href="#ref-for-typedef-length-percentage②">(2)</a> <a href="#ref-for-typedef-length-percentage③">(3)</a> <a href="#ref-for-typedef-length-percentage④">(4)</a>
    <li><a href="#ref-for-typedef-length-percentage⑤">8.3.1. 
Combination of &lt;position></a> <a href="#ref-for-typedef-length-percentage⑥">(2)</a>
    <li><a href="#ref-for-typedef-length-percentage⑦">11. 
Mathematical Expressions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-frequency-percentage">
   <b><a href="#typedef-frequency-percentage">#typedef-frequency-percentage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-frequency-percentage">5.6.1. 
Combination of Percentage and Dimension Mixes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-angle-percentage">
   <b><a href="#typedef-angle-percentage">#typedef-angle-percentage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-angle-percentage">5.6.1. 
Combination of Percentage and Dimension Mixes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-time-percentage">
   <b><a href="#typedef-time-percentage">#typedef-time-percentage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-time-percentage">5.6.1. 
Combination of Percentage and Dimension Mixes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="length-value">
   <b><a href="#length-value">#length-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-length-value">1. 
Introduction</a>
    <li><a href="#ref-for-length-value①">2.1. 
Component Value Types</a>
    <li><a href="#ref-for-length-value②">3. 
Combining Values: Interpolation, Addition, and Accumulation</a>
    <li><a href="#ref-for-length-value③">5. 
Numeric Data Types</a>
    <li><a href="#ref-for-length-value④">5.4. 
Numbers with Units: dimension values</a>
    <li><a href="#ref-for-length-value⑤">5.4.2. 
Combination of Dimensions</a>
    <li><a href="#ref-for-length-value⑥">5.6. 
Mixing Percentages and Dimensions</a> <a href="#ref-for-length-value⑦">(2)</a> <a href="#ref-for-length-value⑧">(3)</a>
    <li><a href="#ref-for-length-value⑨">5.6.1. 
Combination of Percentage and Dimension Mixes</a> <a href="#ref-for-length-value①⓪">(2)</a> <a href="#ref-for-length-value①①">(3)</a>
    <li><a href="#ref-for-length-value①②">6. 
Distance Units: the &lt;length> type</a> <a href="#ref-for-length-value①③">(2)</a>
    <li><a href="#ref-for-length-value①④">8.3. 
2D Positioning: the &lt;position> type</a> <a href="#ref-for-length-value①⑤">(2)</a> <a href="#ref-for-length-value①⑥">(3)</a>
    <li><a href="#ref-for-length-value①⑦">10. 
Attribute References: the attr() function</a>
    <li><a href="#ref-for-length-value①⑧">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-length-value①⑨">11.1. 
Basic Arithmetic: calc()</a>
    <li><a href="#ref-for-length-value②⓪">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a> <a href="#ref-for-length-value②①">(2)</a> <a href="#ref-for-length-value②②">(3)</a> <a href="#ref-for-length-value②③">(4)</a>
    <li><a href="#ref-for-length-value②④">11.6. 
Type Checking</a> <a href="#ref-for-length-value②⑤">(2)</a> <a href="#ref-for-length-value②⑥">(3)</a> <a href="#ref-for-length-value②⑦">(4)</a> <a href="#ref-for-length-value②⑧">(5)</a> <a href="#ref-for-length-value②⑨">(6)</a> <a href="#ref-for-length-value③⓪">(7)</a> <a href="#ref-for-length-value③①">(8)</a> <a href="#ref-for-length-value③②">(9)</a> <a href="#ref-for-length-value③③">(10)</a>
    <li><a href="#ref-for-length-value③④">11.10. 
Serialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="relative-length">
   <b><a href="#relative-length">#relative-length</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-relative-length">6. 
Distance Units: the &lt;length> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="font-relative-length">
   <b><a href="#font-relative-length">#font-relative-length</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-font-relative-length">11.8. 
Computed Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="em">
   <b><a href="#em">#em</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-em">5.4.1. 
Compatible Units</a>
    <li><a href="#ref-for-em①">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-em②">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a>
    <li><a href="#ref-for-em③">11.8. 
Computed Value</a>
    <li><a href="#ref-for-em④">11.10. 
Serialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="ex">
   <b><a href="#ex">#ex</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ex">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-ex①">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a> <a href="#ref-for-ex②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cap">
   <b><a href="#cap">#cap</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cap">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-cap①">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a> <a href="#ref-for-cap②">(2)</a>
    <li><a href="#ref-for-cap③"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="ch">
   <b><a href="#ch">#ch</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ch">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-ch①">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a> <a href="#ref-for-ch②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="length-advance-measure">
   <b><a href="#length-advance-measure">#length-advance-measure</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-length-advance-measure">6.1. 
Relative Lengths</a> <a href="#ref-for-length-advance-measure①">(2)</a>
    <li><a href="#ref-for-length-advance-measure②">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a> <a href="#ref-for-length-advance-measure③">(2)</a> <a href="#ref-for-length-advance-measure④">(3)</a> <a href="#ref-for-length-advance-measure⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="ic">
   <b><a href="#ic">#ic</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ic">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-ic①">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a>
    <li><a href="#ref-for-ic②"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="rem">
   <b><a href="#rem">#rem</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rem">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-rem①">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a> <a href="#ref-for-rem②">(2)</a> <a href="#ref-for-rem③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="lh">
   <b><a href="#lh">#lh</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-lh">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-lh①">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a> <a href="#ref-for-lh②">(2)</a> <a href="#ref-for-lh③">(3)</a>
    <li><a href="#ref-for-lh④"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="rlh">
   <b><a href="#rlh">#rlh</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rlh">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-rlh①">6.1.1. 
Font-relative Lengths: the em, ex, cap, ch, ic, rem, lh, rlh units</a> <a href="#ref-for-rlh②">(2)</a> <a href="#ref-for-rlh③">(3)</a> <a href="#ref-for-rlh④">(4)</a>
    <li><a href="#ref-for-rlh⑤"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vw">
   <b><a href="#vw">#vw</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vw">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-vw①">6.1.2. 
Viewport-percentage Lengths: the vw, vh, vi, vb, vmin, vmax units</a> <a href="#ref-for-vw②">(2)</a> <a href="#ref-for-vw③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vh">
   <b><a href="#vh">#vh</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vh">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-vh①">6.1.2. 
Viewport-percentage Lengths: the vw, vh, vi, vb, vmin, vmax units</a> <a href="#ref-for-vh②">(2)</a> <a href="#ref-for-vh③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-length-vi">
   <b><a href="#valdef-length-vi">#valdef-length-vi</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-length-vi">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-valdef-length-vi①">6.1.2. 
Viewport-percentage Lengths: the vw, vh, vi, vb, vmin, vmax units</a> <a href="#ref-for-valdef-length-vi②">(2)</a>
    <li><a href="#ref-for-valdef-length-vi③"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-length-vb">
   <b><a href="#valdef-length-vb">#valdef-length-vb</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-length-vb">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-valdef-length-vb①">6.1.2. 
Viewport-percentage Lengths: the vw, vh, vi, vb, vmin, vmax units</a> <a href="#ref-for-valdef-length-vb②">(2)</a>
    <li><a href="#ref-for-valdef-length-vb③"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vmin">
   <b><a href="#vmin">#vmin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vmin">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-vmin①">6.1.2. 
Viewport-percentage Lengths: the vw, vh, vi, vb, vmin, vmax units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vmax">
   <b><a href="#vmax">#vmax</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vmax">6.1. 
Relative Lengths</a>
    <li><a href="#ref-for-vmax①">6.1.2. 
Viewport-percentage Lengths: the vw, vh, vi, vb, vmin, vmax units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="absolute-length">
   <b><a href="#absolute-length">#absolute-length</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-absolute-length">6. 
Distance Units: the &lt;length> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="physical-unit">
   <b><a href="#physical-unit">#physical-unit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-physical-unit">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a> <a href="#ref-for-physical-unit①">(2)</a> <a href="#ref-for-physical-unit②">(3)</a> <a href="#ref-for-physical-unit③">(4)</a> <a href="#ref-for-physical-unit④">(5)</a> <a href="#ref-for-physical-unit⑤">(6)</a> <a href="#ref-for-physical-unit⑥">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pixel-unit">
   <b><a href="#pixel-unit">#pixel-unit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pixel-unit">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a> <a href="#ref-for-pixel-unit①">(2)</a> <a href="#ref-for-pixel-unit②">(3)</a> <a href="#ref-for-pixel-unit③">(4)</a> <a href="#ref-for-pixel-unit④">(5)</a> <a href="#ref-for-pixel-unit⑤">(6)</a> <a href="#ref-for-pixel-unit⑥">(7)</a> <a href="#ref-for-pixel-unit⑦">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cm">
   <b><a href="#cm">#cm</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cm">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a> <a href="#ref-for-cm①">(2)</a>
    <li><a href="#ref-for-cm②">7.4. 
Resolution Units: the &lt;resolution> type and dpi, dpcm, dppx units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mm">
   <b><a href="#mm">#mm</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mm">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a> <a href="#ref-for-mm①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="Q">
   <b><a href="#Q">#Q</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Q">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a> <a href="#ref-for-Q①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="in">
   <b><a href="#in">#in</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in">5.4.1. 
Compatible Units</a>
    <li><a href="#ref-for-in①">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a> <a href="#ref-for-in②">(2)</a>
    <li><a href="#ref-for-in③">7.4. 
Resolution Units: the &lt;resolution> type and dpi, dpcm, dppx units</a> <a href="#ref-for-in④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pc">
   <b><a href="#pc">#pc</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pc">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a> <a href="#ref-for-pc①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pt">
   <b><a href="#pt">#pt</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pt">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a> <a href="#ref-for-pt①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="px">
   <b><a href="#px">#px</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-px">5.4.1. 
Compatible Units</a> <a href="#ref-for-px①">(2)</a>
    <li><a href="#ref-for-px②">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a> <a href="#ref-for-px③">(2)</a> <a href="#ref-for-px④">(3)</a>
    <li><a href="#ref-for-px⑤">7.4. 
Resolution Units: the &lt;resolution> type and dpi, dpcm, dppx units</a> <a href="#ref-for-px⑥">(2)</a> <a href="#ref-for-px⑦">(3)</a> <a href="#ref-for-px⑧">(4)</a>
    <li><a href="#ref-for-px⑨">10. 
Attribute References: the attr() function</a> <a href="#ref-for-px①⓪">(2)</a>
    <li><a href="#ref-for-px①①">11.8. 
Computed Value</a>
    <li><a href="#ref-for-px①②">11.10. 
Serialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="anchor-unit">
   <b><a href="#anchor-unit">#anchor-unit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-anchor-unit">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a> <a href="#ref-for-anchor-unit①">(2)</a> <a href="#ref-for-anchor-unit②">(3)</a> <a href="#ref-for-anchor-unit③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="reference-pixel">
   <b><a href="#reference-pixel">#reference-pixel</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reference-pixel">6.2. 
Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="angle-value">
   <b><a href="#angle-value">#angle-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-angle-value">5. 
Numeric Data Types</a>
    <li><a href="#ref-for-angle-value①">5.6. 
Mixing Percentages and Dimensions</a> <a href="#ref-for-angle-value②">(2)</a>
    <li><a href="#ref-for-angle-value③">5.6.1. 
Combination of Percentage and Dimension Mixes</a>
    <li><a href="#ref-for-angle-value④">7.1. 
Angle Units: the &lt;angle> type and deg, grad, rad, turn units</a> <a href="#ref-for-angle-value⑤">(2)</a> <a href="#ref-for-angle-value⑥">(3)</a> <a href="#ref-for-angle-value⑦">(4)</a> <a href="#ref-for-angle-value⑧">(5)</a>
    <li><a href="#ref-for-angle-value⑨">10. 
Attribute References: the attr() function</a>
    <li><a href="#ref-for-angle-value①⓪">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-angle-value①①">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a> <a href="#ref-for-angle-value①②">(2)</a> <a href="#ref-for-angle-value①③">(3)</a>
    <li><a href="#ref-for-angle-value①④">11.6. 
Type Checking</a> <a href="#ref-for-angle-value①⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="deg">
   <b><a href="#deg">#deg</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-deg">7.1. 
Angle Units: the &lt;angle> type and deg, grad, rad, turn units</a> <a href="#ref-for-deg①">(2)</a>
    <li><a href="#ref-for-deg②">11.3.1. 
Argument Ranges</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="grad">
   <b><a href="#grad">#grad</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grad">7.1. 
Angle Units: the &lt;angle> type and deg, grad, rad, turn units</a>
    <li><a href="#ref-for-grad①">11.3.1. 
Argument Ranges</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="rad">
   <b><a href="#rad">#rad</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rad">7.1. 
Angle Units: the &lt;angle> type and deg, grad, rad, turn units</a>
    <li><a href="#ref-for-rad①">11.3.1. 
Argument Ranges</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="turn">
   <b><a href="#turn">#turn</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-turn">7.1. 
Angle Units: the &lt;angle> type and deg, grad, rad, turn units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="time-value">
   <b><a href="#time-value">#time-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-time-value">5. 
Numeric Data Types</a>
    <li><a href="#ref-for-time-value①">5.4. 
Numbers with Units: dimension values</a>
    <li><a href="#ref-for-time-value②">5.6. 
Mixing Percentages and Dimensions</a> <a href="#ref-for-time-value③">(2)</a>
    <li><a href="#ref-for-time-value④">5.6.1. 
Combination of Percentage and Dimension Mixes</a>
    <li><a href="#ref-for-time-value⑤">7.2. 
Duration Units: the &lt;time> type and s, ms units</a> <a href="#ref-for-time-value⑥">(2)</a>
    <li><a href="#ref-for-time-value⑦">10. 
Attribute References: the attr() function</a>
    <li><a href="#ref-for-time-value⑧">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-time-value⑨">11.6. 
Type Checking</a> <a href="#ref-for-time-value①⓪">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="s">
   <b><a href="#s">#s</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-s">7.2. 
Duration Units: the &lt;time> type and s, ms units</a> <a href="#ref-for-s①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="ms">
   <b><a href="#ms">#ms</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ms">7.2. 
Duration Units: the &lt;time> type and s, ms units</a>
    <li><a href="#ref-for-ms①">10. 
Attribute References: the attr() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="frequency-value">
   <b><a href="#frequency-value">#frequency-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-frequency-value">5. 
Numeric Data Types</a>
    <li><a href="#ref-for-frequency-value①">5.4. 
Numbers with Units: dimension values</a>
    <li><a href="#ref-for-frequency-value②">5.6. 
Mixing Percentages and Dimensions</a> <a href="#ref-for-frequency-value③">(2)</a>
    <li><a href="#ref-for-frequency-value④">5.6.1. 
Combination of Percentage and Dimension Mixes</a>
    <li><a href="#ref-for-frequency-value⑤">7.3. 
Frequency Units: the &lt;frequency> type and Hz, kHz units</a> <a href="#ref-for-frequency-value⑥">(2)</a>
    <li><a href="#ref-for-frequency-value⑦">10. 
Attribute References: the attr() function</a>
    <li><a href="#ref-for-frequency-value⑧">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-frequency-value⑨">11.6. 
Type Checking</a> <a href="#ref-for-frequency-value①⓪">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="Hz">
   <b><a href="#Hz">#Hz</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Hz">7.3. 
Frequency Units: the &lt;frequency> type and Hz, kHz units</a> <a href="#ref-for-Hz①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="kHz">
   <b><a href="#kHz">#kHz</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-kHz">7.3. 
Frequency Units: the &lt;frequency> type and Hz, kHz units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="resolution-value">
   <b><a href="#resolution-value">#resolution-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resolution-value">5. 
Numeric Data Types</a>
    <li><a href="#ref-for-resolution-value①">5.4. 
Numbers with Units: dimension values</a>
    <li><a href="#ref-for-resolution-value②">7.4. 
Resolution Units: the &lt;resolution> type and dpi, dpcm, dppx units</a> <a href="#ref-for-resolution-value③">(2)</a> <a href="#ref-for-resolution-value④">(3)</a>
    <li><a href="#ref-for-resolution-value⑤">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-resolution-value⑥">11.6. 
Type Checking</a> <a href="#ref-for-resolution-value⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dpi">
   <b><a href="#dpi">#dpi</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dpi">7.4. 
Resolution Units: the &lt;resolution> type and dpi, dpcm, dppx units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dpcm">
   <b><a href="#dpcm">#dpcm</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dpcm">7.4. 
Resolution Units: the &lt;resolution> type and dpi, dpcm, dppx units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dppx">
   <b><a href="#dppx">#dppx</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dppx">7.4. 
Resolution Units: the &lt;resolution> type and dpi, dpcm, dppx units</a> <a href="#ref-for-dppx①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-position">
   <b><a href="#typedef-position">#typedef-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-position">8.3. 
2D Positioning: the &lt;position> type</a> <a href="#ref-for-typedef-position①">(2)</a> <a href="#ref-for-typedef-position②">(3)</a> <a href="#ref-for-typedef-position③">(4)</a> <a href="#ref-for-typedef-position④">(5)</a> <a href="#ref-for-typedef-position⑤">(6)</a> <a href="#ref-for-typedef-position⑥">(7)</a>
    <li><a href="#ref-for-typedef-position⑦">8.3.1. 
Combination of &lt;position></a> <a href="#ref-for-typedef-position⑧">(2)</a> <a href="#ref-for-typedef-position⑨">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="functional-notation">
   <b><a href="#functional-notation">#functional-notation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-functional-notation">4.4. 
Resource Locators: the &lt;url> type</a>
    <li><a href="#ref-for-functional-notation①">4.4.3. 
URL Modifiers</a>
    <li><a href="#ref-for-functional-notation②">9. 
Functional Notations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-toggle">
   <b><a href="#funcdef-toggle">#funcdef-toggle</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-toggle①">9.1. 
Toggling Between Values: toggle()</a> <a href="#ref-for-funcdef-toggle②">(2)</a> <a href="#ref-for-funcdef-toggle③">(3)</a> <a href="#ref-for-funcdef-toggle④">(4)</a> <a href="#ref-for-funcdef-toggle⑤">(5)</a> <a href="#ref-for-funcdef-toggle⑥">(6)</a> <a href="#ref-for-funcdef-toggle⑦">(7)</a> <a href="#ref-for-funcdef-toggle⑧">(8)</a> <a href="#ref-for-funcdef-toggle⑨">(9)</a> <a href="#ref-for-funcdef-toggle①⓪">(10)</a> <a href="#ref-for-funcdef-toggle①①">(11)</a> <a href="#ref-for-funcdef-toggle①②">(12)</a> <a href="#ref-for-funcdef-toggle①③">(13)</a> <a href="#ref-for-funcdef-toggle①④">(14)</a> <a href="#ref-for-funcdef-toggle①⑤">(15)</a> <a href="#ref-for-funcdef-toggle①⑥">(16)</a>
    <li><a href="#ref-for-funcdef-toggle①⑦"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-toggle-value">
   <b><a href="#typedef-toggle-value">#typedef-toggle-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-toggle-value">9.1. 
Toggling Between Values: toggle()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-attr">
   <b><a href="#funcdef-attr">#funcdef-attr</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-attr①">9.1. 
Toggling Between Values: toggle()</a>
    <li><a href="#ref-for-funcdef-attr②">10. 
Attribute References: the attr() function</a> <a href="#ref-for-funcdef-attr③">(2)</a> <a href="#ref-for-funcdef-attr④">(3)</a> <a href="#ref-for-funcdef-attr⑤">(4)</a> <a href="#ref-for-funcdef-attr⑥">(5)</a> <a href="#ref-for-funcdef-attr⑦">(6)</a> <a href="#ref-for-funcdef-attr⑧">(7)</a>
    <li><a href="#ref-for-funcdef-attr⑨">10.1. 
attr() Types</a> <a href="#ref-for-funcdef-attr①⓪">(2)</a>
    <li><a href="#ref-for-funcdef-attr①①">10.2. 
attr() Substitution</a> <a href="#ref-for-funcdef-attr①②">(2)</a> <a href="#ref-for-funcdef-attr①③">(3)</a> <a href="#ref-for-funcdef-attr①④">(4)</a> <a href="#ref-for-funcdef-attr①⑤">(5)</a> <a href="#ref-for-funcdef-attr①⑥">(6)</a> <a href="#ref-for-funcdef-attr①⑦">(7)</a> <a href="#ref-for-funcdef-attr①⑧">(8)</a> <a href="#ref-for-funcdef-attr①⑨">(9)</a>
    <li><a href="#ref-for-funcdef-attr②⓪">11.1. 
Basic Arithmetic: calc()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-attr-type">
   <b><a href="#typedef-attr-type">#typedef-attr-type</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-attr-type">10. 
Attribute References: the attr() function</a> <a href="#ref-for-typedef-attr-type①">(2)</a> <a href="#ref-for-typedef-attr-type②">(3)</a>
    <li><a href="#ref-for-typedef-attr-type③">10.1. 
attr() Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-dimension-unit">
   <b><a href="#typedef-dimension-unit">#typedef-dimension-unit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-dimension-unit">10. 
Attribute References: the attr() function</a>
    <li><a href="#ref-for-typedef-dimension-unit①">10.1. 
attr() Types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="attr-substitution-value">
   <b><a href="#attr-substitution-value">#attr-substitution-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attr-substitution-value">10.1. 
attr() Types</a> <a href="#ref-for-attr-substitution-value①">(2)</a> <a href="#ref-for-attr-substitution-value②">(3)</a> <a href="#ref-for-attr-substitution-value③">(4)</a> <a href="#ref-for-attr-substitution-value④">(5)</a> <a href="#ref-for-attr-substitution-value⑤">(6)</a> <a href="#ref-for-attr-substitution-value⑥">(7)</a> <a href="#ref-for-attr-substitution-value⑦">(8)</a> <a href="#ref-for-attr-substitution-value⑧">(9)</a> <a href="#ref-for-attr-substitution-value⑨">(10)</a> <a href="#ref-for-attr-substitution-value①⓪">(11)</a> <a href="#ref-for-attr-substitution-value①①">(12)</a> <a href="#ref-for-attr-substitution-value①②">(13)</a> <a href="#ref-for-attr-substitution-value①③">(14)</a> <a href="#ref-for-attr-substitution-value①④">(15)</a>
    <li><a href="#ref-for-attr-substitution-value①⑤">10.2. 
attr() Substitution</a> <a href="#ref-for-attr-substitution-value①⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-attr-string">
   <b><a href="#valdef-attr-string">#valdef-attr-string</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-attr-string">10. 
Attribute References: the attr() function</a> <a href="#ref-for-valdef-attr-string①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="substitute-an-attr">
   <b><a href="#substitute-an-attr">#substitute-an-attr</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-substitute-an-attr">10. 
Attribute References: the attr() function</a>
    <li><a href="#ref-for-substitute-an-attr①">10.2. 
attr() Substitution</a> <a href="#ref-for-substitute-an-attr②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="math-function">
   <b><a href="#math-function">#math-function</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-math-function">9. 
Functional Notations</a>
    <li><a href="#ref-for-math-function①">10.1. 
attr() Types</a>
    <li><a href="#ref-for-math-function②">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-math-function③">11.1. 
Basic Arithmetic: calc()</a> <a href="#ref-for-math-function④">(2)</a> <a href="#ref-for-math-function⑤">(3)</a> <a href="#ref-for-math-function⑥">(4)</a> <a href="#ref-for-math-function⑦">(5)</a>
    <li><a href="#ref-for-math-function⑧">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a>
    <li><a href="#ref-for-math-function⑨">11.3.1. 
Argument Ranges</a>
    <li><a href="#ref-for-math-function①⓪">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a>
    <li><a href="#ref-for-math-function①①">11.4.1. 
Argument Ranges</a>
    <li><a href="#ref-for-math-function①②">11.5. 
Syntax</a>
    <li><a href="#ref-for-math-function①③">11.6. 
Type Checking</a> <a href="#ref-for-math-function①④">(2)</a> <a href="#ref-for-math-function①⑤">(3)</a> <a href="#ref-for-math-function①⑥">(4)</a> <a href="#ref-for-math-function①⑦">(5)</a> <a href="#ref-for-math-function①⑧">(6)</a> <a href="#ref-for-math-function①⑨">(7)</a> <a href="#ref-for-math-function②⓪">(8)</a> <a href="#ref-for-math-function②①">(9)</a> <a href="#ref-for-math-function②②">(10)</a> <a href="#ref-for-math-function②③">(11)</a> <a href="#ref-for-math-function②④">(12)</a> <a href="#ref-for-math-function②⑤">(13)</a> <a href="#ref-for-math-function②⑥">(14)</a> <a href="#ref-for-math-function②⑦">(15)</a>
    <li><a href="#ref-for-math-function②⑧">11.7. 
Internal Representation</a> <a href="#ref-for-math-function②⑨">(2)</a> <a href="#ref-for-math-function③⓪">(3)</a> <a href="#ref-for-math-function③①">(4)</a> <a href="#ref-for-math-function③②">(5)</a> <a href="#ref-for-math-function③③">(6)</a>
    <li><a href="#ref-for-math-function③④">11.7.1. 
Simplification</a> <a href="#ref-for-math-function③⑤">(2)</a>
    <li><a href="#ref-for-math-function③⑥">11.8. 
Computed Value</a> <a href="#ref-for-math-function③⑦">(2)</a> <a href="#ref-for-math-function③⑧">(3)</a> <a href="#ref-for-math-function③⑨">(4)</a>
    <li><a href="#ref-for-math-function④⓪">11.9. 
Range Checking</a> <a href="#ref-for-math-function④①">(2)</a> <a href="#ref-for-math-function④②">(3)</a>
    <li><a href="#ref-for-math-function④③">11.10. 
Serialization</a>
    <li><a href="#ref-for-math-function④④">11.11. 
Combination of Math Functions</a> <a href="#ref-for-math-function④⑤">(2)</a>
    <li><a href="#ref-for-math-function④⑥"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-calc">
   <b><a href="#funcdef-calc">#funcdef-calc</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-calc">5.6. 
Mixing Percentages and Dimensions</a> <a href="#ref-for-funcdef-calc①">(2)</a> <a href="#ref-for-funcdef-calc②">(3)</a>
    <li><a href="#ref-for-funcdef-calc③">5.6.1. 
Combination of Percentage and Dimension Mixes</a>
    <li><a href="#ref-for-funcdef-calc④">9.1. 
Toggling Between Values: toggle()</a>
    <li><a href="#ref-for-funcdef-calc⑤">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-funcdef-calc⑥">11.1. 
Basic Arithmetic: calc()</a> <a href="#ref-for-funcdef-calc⑦">(2)</a> <a href="#ref-for-funcdef-calc⑧">(3)</a> <a href="#ref-for-funcdef-calc⑨">(4)</a> <a href="#ref-for-funcdef-calc①⓪">(5)</a> <a href="#ref-for-funcdef-calc①①">(6)</a>
    <li><a href="#ref-for-funcdef-calc①②">11.2. 
Comparison Functions: min(), max(), and clamp()</a>
    <li><a href="#ref-for-funcdef-calc①③">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-calc①④">11.6. 
Type Checking</a> <a href="#ref-for-funcdef-calc①⑤">(2)</a>
    <li><a href="#ref-for-funcdef-calc①⑥">11.7. 
Internal Representation</a>
    <li><a href="#ref-for-funcdef-calc①⑦">11.8. 
Computed Value</a>
    <li><a href="#ref-for-funcdef-calc①⑧">11.9. 
Range Checking</a> <a href="#ref-for-funcdef-calc①⑨">(2)</a>
    <li><a href="#ref-for-funcdef-calc②⓪">11.10. 
Serialization</a> <a href="#ref-for-funcdef-calc②①">(2)</a>
    <li><a href="#ref-for-funcdef-calc②②"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="calc-calculation">
   <b><a href="#calc-calculation">#calc-calculation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-calc-calculation">11.1. 
Basic Arithmetic: calc()</a> <a href="#ref-for-calc-calculation①">(2)</a>
    <li><a href="#ref-for-calc-calculation②">11.2. 
Comparison Functions: min(), max(), and clamp()</a> <a href="#ref-for-calc-calculation③">(2)</a> <a href="#ref-for-calc-calculation④">(3)</a>
    <li><a href="#ref-for-calc-calculation⑤">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a> <a href="#ref-for-calc-calculation⑥">(2)</a> <a href="#ref-for-calc-calculation⑦">(3)</a>
    <li><a href="#ref-for-calc-calculation⑧">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a> <a href="#ref-for-calc-calculation⑨">(2)</a> <a href="#ref-for-calc-calculation①⓪">(3)</a> <a href="#ref-for-calc-calculation①①">(4)</a> <a href="#ref-for-calc-calculation①②">(5)</a>
    <li><a href="#ref-for-calc-calculation①③">11.4.1. 
Argument Ranges</a>
    <li><a href="#ref-for-calc-calculation①④">11.5. 
Syntax</a> <a href="#ref-for-calc-calculation①⑤">(2)</a>
    <li><a href="#ref-for-calc-calculation①⑥">11.6. 
Type Checking</a> <a href="#ref-for-calc-calculation①⑦">(2)</a> <a href="#ref-for-calc-calculation①⑧">(3)</a> <a href="#ref-for-calc-calculation①⑨">(4)</a> <a href="#ref-for-calc-calculation②⓪">(5)</a> <a href="#ref-for-calc-calculation②①">(6)</a> <a href="#ref-for-calc-calculation②②">(7)</a> <a href="#ref-for-calc-calculation②③">(8)</a> <a href="#ref-for-calc-calculation②④">(9)</a>
    <li><a href="#ref-for-calc-calculation②⑤">11.7. 
Internal Representation</a> <a href="#ref-for-calc-calculation②⑥">(2)</a>
    <li><a href="#ref-for-calc-calculation②⑦">11.10. 
Serialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-min">
   <b><a href="#funcdef-min">#funcdef-min</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-min">11.2. 
Comparison Functions: min(), max(), and clamp()</a> <a href="#ref-for-funcdef-min①">(2)</a> <a href="#ref-for-funcdef-min②">(3)</a> <a href="#ref-for-funcdef-min③">(4)</a> <a href="#ref-for-funcdef-min④">(5)</a> <a href="#ref-for-funcdef-min⑤">(6)</a> <a href="#ref-for-funcdef-min⑥">(7)</a>
    <li><a href="#ref-for-funcdef-min⑦">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-min⑧">11.6. 
Type Checking</a>
    <li><a href="#ref-for-funcdef-min⑨"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-max">
   <b><a href="#funcdef-max">#funcdef-max</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-max">11.2. 
Comparison Functions: min(), max(), and clamp()</a> <a href="#ref-for-funcdef-max①">(2)</a> <a href="#ref-for-funcdef-max②">(3)</a> <a href="#ref-for-funcdef-max③">(4)</a> <a href="#ref-for-funcdef-max④">(5)</a> <a href="#ref-for-funcdef-max⑤">(6)</a> <a href="#ref-for-funcdef-max⑥">(7)</a>
    <li><a href="#ref-for-funcdef-max⑦">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-max⑧">11.6. 
Type Checking</a>
    <li><a href="#ref-for-funcdef-max⑨"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-clamp">
   <b><a href="#funcdef-clamp">#funcdef-clamp</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-clamp">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-funcdef-clamp①">11.2. 
Comparison Functions: min(), max(), and clamp()</a> <a href="#ref-for-funcdef-clamp②">(2)</a> <a href="#ref-for-funcdef-clamp③">(3)</a> <a href="#ref-for-funcdef-clamp④">(4)</a> <a href="#ref-for-funcdef-clamp⑤">(5)</a> <a href="#ref-for-funcdef-clamp⑥">(6)</a> <a href="#ref-for-funcdef-clamp⑦">(7)</a>
    <li><a href="#ref-for-funcdef-clamp⑧">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-clamp⑨">11.6. 
Type Checking</a>
    <li><a href="#ref-for-funcdef-clamp①⓪"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-sin">
   <b><a href="#funcdef-sin">#funcdef-sin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-sin">11. 
Mathematical Expressions</a>
    <li><a href="#ref-for-funcdef-sin①">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a> <a href="#ref-for-funcdef-sin②">(2)</a> <a href="#ref-for-funcdef-sin③">(3)</a>
    <li><a href="#ref-for-funcdef-sin④">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-sin⑤">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-cos">
   <b><a href="#funcdef-cos">#funcdef-cos</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-cos">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a> <a href="#ref-for-funcdef-cos①">(2)</a> <a href="#ref-for-funcdef-cos②">(3)</a>
    <li><a href="#ref-for-funcdef-cos③">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-cos④">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-tan">
   <b><a href="#funcdef-tan">#funcdef-tan</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-tan">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a> <a href="#ref-for-funcdef-tan①">(2)</a> <a href="#ref-for-funcdef-tan②">(3)</a>
    <li><a href="#ref-for-funcdef-tan③">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-tan④">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-asin">
   <b><a href="#funcdef-asin">#funcdef-asin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-asin">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a> <a href="#ref-for-funcdef-asin①">(2)</a> <a href="#ref-for-funcdef-asin②">(3)</a>
    <li><a href="#ref-for-funcdef-asin③">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-asin④">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-acos">
   <b><a href="#funcdef-acos">#funcdef-acos</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-acos">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a> <a href="#ref-for-funcdef-acos①">(2)</a> <a href="#ref-for-funcdef-acos②">(3)</a>
    <li><a href="#ref-for-funcdef-acos③">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-acos④">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-atan">
   <b><a href="#funcdef-atan">#funcdef-atan</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-atan">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a> <a href="#ref-for-funcdef-atan①">(2)</a> <a href="#ref-for-funcdef-atan②">(3)</a>
    <li><a href="#ref-for-funcdef-atan③">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-atan④">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-atan2">
   <b><a href="#funcdef-atan2">#funcdef-atan2</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-atan2">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a> <a href="#ref-for-funcdef-atan2①">(2)</a>
    <li><a href="#ref-for-funcdef-atan2②">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-atan2③">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-pow">
   <b><a href="#funcdef-pow">#funcdef-pow</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-pow">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a> <a href="#ref-for-funcdef-pow①">(2)</a> <a href="#ref-for-funcdef-pow②">(3)</a> <a href="#ref-for-funcdef-pow③">(4)</a>
    <li><a href="#ref-for-funcdef-pow④">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-pow⑤">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-sqrt">
   <b><a href="#funcdef-sqrt">#funcdef-sqrt</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-sqrt">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a> <a href="#ref-for-funcdef-sqrt①">(2)</a> <a href="#ref-for-funcdef-sqrt②">(3)</a> <a href="#ref-for-funcdef-sqrt③">(4)</a>
    <li><a href="#ref-for-funcdef-sqrt④">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-sqrt⑤">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-hypot">
   <b><a href="#funcdef-hypot">#funcdef-hypot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-hypot">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a> <a href="#ref-for-funcdef-hypot①">(2)</a> <a href="#ref-for-funcdef-hypot②">(3)</a> <a href="#ref-for-funcdef-hypot③">(4)</a> <a href="#ref-for-funcdef-hypot④">(5)</a> <a href="#ref-for-funcdef-hypot⑤">(6)</a>
    <li><a href="#ref-for-funcdef-hypot⑥">11.5. 
Syntax</a>
    <li><a href="#ref-for-funcdef-hypot⑦">11.6. 
Type Checking</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-calc-sum">
   <b><a href="#typedef-calc-sum">#typedef-calc-sum</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-calc-sum">11.1. 
Basic Arithmetic: calc()</a>
    <li><a href="#ref-for-typedef-calc-sum①">11.5. 
Syntax</a> <a href="#ref-for-typedef-calc-sum②">(2)</a> <a href="#ref-for-typedef-calc-sum③">(3)</a> <a href="#ref-for-typedef-calc-sum④">(4)</a> <a href="#ref-for-typedef-calc-sum⑤">(5)</a> <a href="#ref-for-typedef-calc-sum⑥">(6)</a> <a href="#ref-for-typedef-calc-sum⑦">(7)</a> <a href="#ref-for-typedef-calc-sum⑧">(8)</a> <a href="#ref-for-typedef-calc-sum⑨">(9)</a> <a href="#ref-for-typedef-calc-sum①⓪">(10)</a> <a href="#ref-for-typedef-calc-sum①①">(11)</a> <a href="#ref-for-typedef-calc-sum①②">(12)</a> <a href="#ref-for-typedef-calc-sum①③">(13)</a> <a href="#ref-for-typedef-calc-sum①④">(14)</a> <a href="#ref-for-typedef-calc-sum①⑤">(15)</a> <a href="#ref-for-typedef-calc-sum①⑥">(16)</a> <a href="#ref-for-typedef-calc-sum①⑦">(17)</a> <a href="#ref-for-typedef-calc-sum①⑧">(18)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-calc-product">
   <b><a href="#typedef-calc-product">#typedef-calc-product</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-calc-product">11.5. 
Syntax</a> <a href="#ref-for-typedef-calc-product①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-calc-value">
   <b><a href="#typedef-calc-value">#typedef-calc-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-calc-value">11.5. 
Syntax</a> <a href="#ref-for-typedef-calc-value①">(2)</a> <a href="#ref-for-typedef-calc-value②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="determine-the-type-of-a-calculation">
   <b><a href="#determine-the-type-of-a-calculation">#determine-the-type-of-a-calculation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-determine-the-type-of-a-calculation">11.3. 
Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a>
    <li><a href="#ref-for-determine-the-type-of-a-calculation①">11.4. 
Exponential  Functions: pow(), sqrt(), hypot()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="top-level-calculation">
   <b><a href="#top-level-calculation">#top-level-calculation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-top-level-calculation">11.6. 
Type Checking</a> <a href="#ref-for-top-level-calculation①">(2)</a> <a href="#ref-for-top-level-calculation②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="calculation-tree">
   <b><a href="#calculation-tree">#calculation-tree</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-calculation-tree">11.7. 
Internal Representation</a> <a href="#ref-for-calculation-tree①">(2)</a>
    <li><a href="#ref-for-calculation-tree②">11.8. 
Computed Value</a> <a href="#ref-for-calculation-tree③">(2)</a>
    <li><a href="#ref-for-calculation-tree④">11.10. 
Serialization</a> <a href="#ref-for-calculation-tree⑤">(2)</a> <a href="#ref-for-calculation-tree⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="calculation-tree-operator-nodes">
   <b><a href="#calculation-tree-operator-nodes">#calculation-tree-operator-nodes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-calculation-tree-operator-nodes">11.7. 
Internal Representation</a>
    <li><a href="#ref-for-calculation-tree-operator-nodes①">11.7.1. 
Simplification</a> <a href="#ref-for-calculation-tree-operator-nodes②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="calculation-tree-calc-operator-nodes">
   <b><a href="#calculation-tree-calc-operator-nodes">#calculation-tree-calc-operator-nodes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-calculation-tree-calc-operator-nodes">11.7.1. 
Simplification</a>
    <li><a href="#ref-for-calculation-tree-calc-operator-nodes①">11.10. 
Serialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="parse-a-calculation">
   <b><a href="#parse-a-calculation">#parse-a-calculation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-parse-a-calculation">11.7. 
Internal Representation</a> <a href="#ref-for-parse-a-calculation①">(2)</a> <a href="#ref-for-parse-a-calculation②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="simplify-a-calculation-tree">
   <b><a href="#simplify-a-calculation-tree">#simplify-a-calculation-tree</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-simplify-a-calculation-tree">11.7. 
Internal Representation</a>
    <li><a href="#ref-for-simplify-a-calculation-tree①">11.7.1. 
Simplification</a>
    <li><a href="#ref-for-simplify-a-calculation-tree②">11.8. 
Computed Value</a>
    <li><a href="#ref-for-simplify-a-calculation-tree③">11.11. 
Combination of Math Functions</a> <a href="#ref-for-simplify-a-calculation-tree④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="serialize-a-math-function">
   <b><a href="#serialize-a-math-function">#serialize-a-math-function</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serialize-a-math-function">11.10. 
Serialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="serialize-a-calculation-tree">
   <b><a href="#serialize-a-calculation-tree">#serialize-a-calculation-tree</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serialize-a-calculation-tree">11.10. 
Serialization</a> <a href="#ref-for-serialize-a-calculation-tree①">(2)</a> <a href="#ref-for-serialize-a-calculation-tree②">(3)</a> <a href="#ref-for-serialize-a-calculation-tree③">(4)</a> <a href="#ref-for-serialize-a-calculation-tree④">(5)</a> <a href="#ref-for-serialize-a-calculation-tree⑤">(6)</a> <a href="#ref-for-serialize-a-calculation-tree⑥">(7)</a> <a href="#ref-for-serialize-a-calculation-tree⑦">(8)</a> <a href="#ref-for-serialize-a-calculation-tree⑧">(9)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="sort-a-calculations-children">
   <b><a href="#sort-a-calculations-children">#sort-a-calculations-children</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sort-a-calculations-children">11.10. 
Serialization</a> <a href="#ref-for-sort-a-calculations-children①">(2)</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>